React表单提交跳转异常：如何完成提交关闭表单再跳转

问题分析 #

你遇到的核心问题是：调用await handleSubmit()后立刻判断inProgress状态，但React状态更新是异步的，此时inProgress还未从true切换为false，导致页面提前跳转，提交逻辑被带到新页面执行。另外你误用了props.inProgress，应该使用表单内部传递的fieldRenderProps.inProgress。

解决方案 #

通过状态标记+监听状态变化的方式，确保在表单提交完成、inProgress结束后再执行页面跳转：

render={fieldRenderProps => {
  const {
    rootClassName,
    className,
    formId,
    handleSubmit,
    inProgress, // 使用表单内部的inProgress状态，而非props
    invalid,
    intl,
    img1,
    onOpenTermsOfService,
    values,
  } = fieldRenderProps;
  const [isSubmitted, setIsSubmitted] = React.useState(false);

  const handleSubmit2 = async (event) => {
    event.preventDefault();
    try {
      // 将event传递给原handleSubmit，确保原逻辑正常执行
      await handleSubmit(event);
      // 标记提交已触发
      setIsSubmitted(true);
    } catch (error) {
      // 提交失败时重置标记，避免错误跳转
      setIsSubmitted(false);
      // 可在此添加错误提示逻辑
    }
  };

  // 监听提交标记和inProgress状态，满足条件时跳转
  React.useEffect(() => {
    if (isSubmitted && !inProgress) {
      history.push('/about');
      // 重置标记，防止后续状态变化重复触发跳转
      setIsSubmitted(false);
    }
  }, [isSubmitted, inProgress, history]);

  return (
    <Form className={classes} onSubmit={handleSubmit2}>
      {/* 原有表单内容 */}
    </Form>
  );
}}

关键说明 #

• 状态标记isSubmitted：用来区分是提交触发的inProgress变化，还是其他操作导致的状态变更，避免误跳转。
• 监听inProgress：通过useEffect监听表单内部的inProgress状态，只有当提交已触发且状态变为false时，才执行跳转，确保表单提交和关闭逻辑已在原页面完成。
• 错误处理：用try/catch包裹提交逻辑，提交失败时不执行跳转，避免异常场景下的错误行为。

内容的提问来源于stack exchange，提问作者user3183586