React Hooks setState未即时更新：提交表单仅显示密码错误

嘿，我明白你碰到的这个问题啦！这其实是React中useState更新机制导致的小坑——你连续两次调用setValues的时候，每次都是基于当前渲染周期里的原始values状态来做对象展开的，所以第二个更新会把第一个的修改覆盖掉，最后就只剩密码字段的错误提示啦。

问题根源 #

举个例子：当你执行第一个if时，虽然把emailError设为了true，但第二个if里的...values还是用的最开始的那个values对象（此时emailError还是false），所以第二个setValues会把第一个更新的emailError又改回false，自然就看不到邮箱的错误提示了。

两种修复方案 #

方案一：使用函数式更新（推荐）

React的setState支持传入一个函数，这个函数的参数是当前最新的状态值，这样每次更新都会基于上一次的结果，不会互相覆盖：

// 提交方法中的校验逻辑修改为：
if (values.email.length <= 0) {
  setValues(prevValues => ({ 
    ...prevValues, 
    emailError: true, 
    emailErrorMessage: "Email field must not be empty" 
  }));
}
if (values.password.length <= 0) {
  setValues(prevValues => ({ 
    ...prevValues, 
    passwordError: true, 
    passwordErrorMessage: "Password field must not be empty" 
  }));
}

方案二：先收集所有错误，一次性更新状态

这种方式更直观，先创建一个新的状态对象，把所有需要修改的错误状态都整理好，最后只调用一次setValues：

const handleSubmit = () => {
  // 先复制当前状态，避免直接修改原对象
  const updatedValues = { ...values };
  let hasErrors = false;

  // 校验邮箱
  if (values.email.length <= 0) {
    updatedValues.emailError = true;
    updatedValues.emailErrorMessage = "Email field must not be empty";
    hasErrors = true;
  } else {
    // 重置邮箱的错误状态（如果之前有错误的话）
    updatedValues.emailError = false;
    updatedValues.emailErrorMessage = "";
  }

  // 校验密码
  if (values.password.length <= 0) {
    updatedValues.passwordError = true;
    updatedValues.passwordErrorMessage = "Password field must not be empty";
    hasErrors = true;
  } else {
    // 重置密码的错误状态
    updatedValues.passwordError = false;
    updatedValues.passwordErrorMessage = "";
  }

  // 一次性更新所有状态
  setValues(updatedValues);

  // 如果没有错误，再执行提交逻辑
  if (!hasErrors) {
    // 这里写表单提交的代码，比如调用API等
  }
};

这个方案还有个额外好处：可以在用户输入正确时自动清除对应的错误提示，提升交互体验~

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