时间戳

首页 > 解决方案 > 如何在 React Typescript 中的异步提交函数调用后清除输入并关闭模式

javascript - 如何在 React Typescript 中的异步提交函数调用后清除输入并关闭模式

问题描述

我可能遇到了一些看似基本的问题，但我只是找不到解决这个问题的方法。我正在传递handleSubmit 函数，它是异步的，但它不返回任何值，从父表单组件到子表单组件。在子组件中调用它之后，我想清除输入并关闭模式。在我的例子中，在 handleSubmit 完成执行之前，输入值被清除并且模式被关闭。我在这个项目中使用 React 和 TypeScript。如果有人可以提供帮助，我将不胜感激。提前致谢

父组件

  const createVariation = (variationType: string, variationValues: string[]): void => {
setLoading(true);
setTimeout(() => {
  storeProductVariant(product.id, variationType, variationValues, accessToken)
    .then(() => {
      showProductVariants(product.id, accessToken)
        .then((response) => {
          dispatch(actionsProducts.showProductVariants(response.data.data));
        });

      showProductSkus(product.id, accessToken)
        .then((response) => {
          dispatch(actionsProducts.showProductSkus(response.data.data));
        });
      setLoading(false);
    })
    .catch((error) => {
      setError(error.response.data.errors.variant[0]);
      setLoading(false);

      setTimeout(() => {
        setError('');
      }, 3000);
    });
}, 1000);

};

子组件

  const onSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
event.preventDefault();
if (validateInputs(
  inputValues.variationType,
  inputValues.variationValues,
)) {
  handleSubmit(inputValues.variationType, inputValues.variationValues, variantId);

问题就在这里，因为我不能调用 .then() 因为函数是无效的

  setInputValues({
    variationType: '',
    variationValues: [],
    variation: '',
  });
  handleClose();
  setSelectedVariations([]);
}

};

标签： javascriptreactjstypescript

解决方案

您需要的可能有点复杂，但是您可以通过以下步骤来实现：

  1. 在父组件中保留一个状态变量，submissionDone例如loading. 并将其传递给您的子组件。

  2. 更新submissionDone到true在父级中解决承诺的时间。

  3. 的更改/更新值submissionDone将反映在子组件中。

  4. 根据此变量清除您的输入或子组件中的任何其他内容。

由于您没有提供完整的代码，因此我提示您 -useEffect如果您使用功能组件或componentDidUpdate使用类组件，则可以在子组件中编写此逻辑。

推荐阅读