React遍历useState对象改属性 直接改原对象重置表单错误为何失效

• React 的 useState 在判断是否需要触发组件重渲染时，默认对新旧状态做浅引用对比：只有当 setFields 传入的新状态和当前存储的状态内存引用不一致时，才会判定状态发生了实际变更，进而执行重渲染流程。
• 你最初的实现里，直接在入参 prev（也就是当前state的原始引用）上遍历修改 error 属性，最后返回的还是同一个原对象的引用。哪怕对象内部的error值确实被改成了空字符串，因为整个state的引用地址没有任何变化，React检测不到状态差异，自然不会触发重渲染，页面上的错误提示也就无法刷新。
• 推荐的浅拷贝方案能生效，是因为先用{...prev}对最外层的fields对象做了浅拷贝，生成了一个内存地址完全独立的新对象copy，后续在这个新对象上遍历修改所有字段的error值为空，最后返回这个新拷贝对象。此时React对比新旧state的引用地址，发现是两个完全不同的对象，就会正常触发状态更新和重渲染，错误重置的逻辑也就可以正常运行。

补充优化建议：当前的浅拷贝方案只拷贝了最外层的fields对象，每个子字段（name/lastName/phone）的属性对象依然和原state共享引用。因为本次修改的是子对象内部的error值，且最外层引用变化已经足够触发重渲染，所以功能上完全可以满足需求。如果需要严格遵循React不可变数据的更新规范，避免后续复杂逻辑下的引用交叉问题，可以对每个子字段也做一层浅拷贝，写法如下：

setFields(prev => {
  const copy = { ...prev };
  for (let key in copy) {
    // 单独拷贝每个子字段对象，完全切断和原state的引用关联
    copy[key] = { ...copy[key], error: '' }
  }
  return copy;
})

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