React表单验证后需二次点击提交？问题排查与修复

问题原因 #

核心问题在于React的状态更新是异步的：

• 第一次点击提交时，你在handleSubmit里调用setFullnameHasError将错误状态设为false，但这个状态更新不会立刻生效——当前函数执行过程中，fullnameHasError还是旧值，所以外部的formIsValid依然是false，导致if (!formIsValid) return;拦截了提交逻辑。
• 当setFullnameHasError完成异步更新后，组件重新渲染，formIsValid才会变成true，此时第二次点击提交，才能通过判断执行console.log。

修复方案 #

不需要依赖组件状态来判断表单是否有效，直接在handleSubmit函数内用临时变量跟踪验证结果即可：

import { useState } from "react";

const letterRegex = /^[\w'\-,.][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*(){}|~<>;;:[\]]{2,}$/;

function App() {
  const [fullnameValue, setFullnameValue] = useState("");
  const [fullnameHasError, setFullnameHasError] = useState({ state: null, message: "" });

  const handleChange = (event) => {
    setFullnameValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    let isValid = true;

    // 执行验证逻辑，同步更新isValid状态
    if (fullnameValue.trim().length === 0) {
      setFullnameHasError({ state: true, message: "Can't be empty" });
      isValid = false;
    } else if (!letterRegex.test(fullnameValue)) {
      setFullnameHasError({ state: true, message: "WRONG FORMAT" });
      isValid = false;
    } else {
      setFullnameHasError({ state: false, message: "" });
    }

    // 直接用同步的isValid判断是否执行提交逻辑
    if (!isValid) return;

    console.log("YOUR FORM IS SENT");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={fullnameValue} onChange={handleChange} />
      {fullnameHasError.state && <p>{fullnameHasError.message}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

其他可行方案 #

1. 使用表单库简化逻辑：比如React Hook Form或Formik，这类库内置了同步验证机制，无需手动处理异步状态更新的问题，代码更简洁易维护。
2. 实时验证替代提交时验证：在handleChange阶段就执行验证，提前更新错误状态，提交时直接基于已有的错误状态判断是否提交。

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