React实现表单自定义错误校验时setErr调用异常如何解决

问题根源 #

你当前的代码存在两个核心错误导致校验失效：

1. 对象字面量中直接写value作为键名，会被识别为固定字符串"value"，而非遍历得到的动态字段名变量，无法对应到err对象里的name/age/city字段。
2. React的状态更新是异步批量处理的，你在for循环中多次调用setErr，每次展开的...err都是循环开始前的旧状态，最终只会保留最后一次循环的更新结果，前面的错误提示会被覆盖。

修正方案 #

正确的逻辑是先遍历所有字段生成完整的错误对象，再一次性调用setErr更新状态，避免多次异步更新的冲突问题。修正后的代码如下：

const validateForms = () => {
  // 初始化错误对象，所有字段默认无错误
  const newErr = Object.fromEntries(
    Object.keys(values).map(key => [key, ""])
  );

  // 遍历校验所有字段
  for (const key in values) {
    // 加trim避免用户输入纯空格的情况
    if (values[key].trim() === "") {
      // 用计算属性名动态设置对应字段的错误提示
      newErr[key] = `${key} 为必填项`;
    }
  }

  // 一次性更新错误状态
  setErr(newErr);

  // 可选：校验无错误时执行后续提交逻辑
  const isValidatePass = Object.values(newErr).every(errMsg => errMsg === "");
  if (isValidatePass) {
    // 这里写校验通过后的提交逻辑，比如调用接口提交表单
    console.log("表单校验通过", values);
  }
};

如果你的表单字段固定，也可以手动初始化newErr，效果完全一致：

const newErr = {
  name: "",
  age: "",
  city: ""
};

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