React Typescript 异步调用submit提交函数后如何清空输入并关闭模态框

第一步：调整父组件createVariation函数，返回异步Promise #

原函数返回void是因为没有向外暴露异步执行状态，我们需要把整个异步流程的Promise返回，同时优化内部并行请求的等待逻辑：

// 修改返回值类型为Promise<void>
const createVariation = (variationType: string, variationValues: string[]): Promise<void> => {
  setLoading(true);
  // 向外返回整个异步Promise链
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      storeProductVariant(product.id, variationType, variationValues, accessToken)
        .then(() => {
          // 两个并行请求用Promise.all包裹，确保都执行完成再走后续逻辑
          return Promise.all([
            showProductVariants(product.id, accessToken).then((response) => {
              dispatch(actionsProducts.showProductVariants(response.data.data));
            }),
            showProductSkus(product.id, accessToken).then((response) => {
              dispatch(actionsProducts.showProductSkus(response.data.data));
            })
          ])
        })
        .then(() => {
          setLoading(false);
          resolve(); // 异步全部执行成功，标记Promise完成
        })
        .catch((error) => {
          setError(error.response.data.errors.variant[0]);
          setLoading(false);
          setTimeout(() => {
            setError('');
          }, 3000);
          reject(error); // 异步执行失败，标记Promise失败
        });
    }, 1000);
  })
}

第二步：调整子组件提交逻辑，等待异步执行完成后再操作 #

把onSubmit改成异步函数，用await等待handleSubmit执行完成后再执行清空、关闭模态框的逻辑，同时增加错误捕获避免请求失败时仍然关闭表单：

// 改为异步函数
const onSubmit = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
  event.preventDefault();
  if (validateInputs(
    inputValues.variationType,
    inputValues.variationValues,
  )) {
    try {
      // 等待异步提交执行完成
      await handleSubmit(inputValues.variationType, inputValues.variationValues, variantId);
      // 执行成功后再做清空、关闭操作
      setInputValues({
        variationType: '',
        variationValues: [],
        variation: '',
      });
      handleClose();
      setSelectedVariations([]);
    } catch (err) {
      // 请求失败时可以在这里做额外错误提示，不需要关闭表单
      console.error('提交失败', err);
    }
  }
}

补充注意事项 #

• 要同步修改父组件向子组件传递handleSubmit的Props类型定义，将原来的返回值void改为Promise<void>，避免TS类型报错
• 如果不需要等待两个查询请求showProductVariants、showProductSkus完成就可以关闭模态框，也可以去掉Promise.all包裹，在storeProductVariant执行成功后直接resolve()即可

内容的提问来源于stack exchange，提问作者Uroš Milosavljević