React表单验证中使用扩展运算符更新state为何仅保留最新错误？

嗨，我来帮你搞定这个表单验证的问题～

为什么第一个错误会被覆盖？ #

核心问题在于React的setState是异步更新的，再加上你当前的代码逻辑存在两个关键问题：

1. 当你在第一个if里执行this.setState({ errors: { ...this.state.errors, name: "This field is required" } })时，React不会立刻更新this.state.errors，而是把这个更新加入待处理队列。紧接着第二个if里的setState读取的依然是更新前的空errors对象，所以第二个setState会直接把errors设置成{surname: "This field is required"}，完全覆盖了第一个错误的更新。
2. 第二个if里的return语句会让函数提前退出，但就算去掉这个return，由于setState的异步特性，第一个错误还是会被覆盖。

修复方案：先收集所有错误，再统一更新状态 #

正确的做法是先创建一个临时对象，把所有验证错误都收集进去，最后只调用一次setState来更新错误状态。这样既避免了异步更新的冲突，也能确保所有错误都被正确收集：

state = { user: null, errors: {} }

onSubmitHandler = e => {
  e.preventDefault();
  // 初始化空的错误收集对象
  const newErrors = {};

  // 验证姓名字段
  if (this.state.user?.name.trim().length === 0) {
    newErrors.name = "This field is required";
  }

  // 验证姓氏字段
  if (this.state.user?.surname.trim().length === 0) {
    newErrors.surname = "This field is required";
  }

  // 一次性更新错误状态
  this.setState({ errors: newErrors });

  // 如果没有错误，再执行后续提交逻辑
  if (Object.keys(newErrors).length === 0) {
    // 这里写你的表单提交逻辑，比如调用API保存数据等
  }
}

额外提示 #

• 我在代码里加了可选链操作符?.，因为你的user初始值是null，直接访问this.state.user.name会抛出Cannot read properties of null的错误，加上?.可以安全地访问嵌套属性。
• 这种“先收集所有错误再统一更新”的方式，也更便于后续扩展更多表单字段的验证逻辑。

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