使用展开运算符和多段if语句时useState setter未正常更新状态？

你观察到的「只有最后一段setErrors逻辑生效」的现象，本质是连续调用同一个React状态更新函数时，所有更新引用的都是当前渲染周期内捕获的同一份旧状态快照，和展开运算符本身没有关系。

• 你写的三段setErrors逻辑里，每一次传入的新对象都是基于同一个初始errors旧值通过展开运算生成的：针对name字段的修改、针对email字段的修改，都是从同一个起点开始的局部修改，没有承接上一次setErrors的更新结果。
• 你能观察到所有if分支的console.log都正常打印，是因为这些判断逻辑本身是同步顺序执行的；但当React合并处理这三次setErrors调用时，最后一次传入的更新对象会把前两次的修改全部覆盖，最终只有最后一段逻辑的修改能体现在最终的状态里，也就出现了你注释掉密码校验逻辑后，只剩邮箱校验生效的现象。

把所有依赖errors旧值的setErrors调用，替换成函数式状态更新，让React自动按顺序链式传递每一次更新后的最新状态：

// 姓名校验逻辑
setErrors(prev => ({
  ...prev,
  name: user.name === '' ? 'You must enter your name.' : ''
}))

// 邮箱校验逻辑
setErrors(prev => ({
  ...prev,
  email: user.email === '' ? 'You must enter a valid email.' : ''
}))

// 密码校验逻辑
setErrors(prev => ({
  ...prev,
  password: user.password === '' ? 'You must enter a password.' : ''
}))

替换后React会将三次更新按执行顺序排队，每一次更新拿到的prev都是上一次更新完成后的最新值，不会出现后序更新覆盖前序修改的问题。

内容的提问来源于stack exchange，提问作者R. Shoemaker