React多个useEffect同时修改同一对象仅最后更新生效如何解决

问题1：多组件同时更新仅保留最后一条的问题 #

原因 #

你的useEffect依赖是空数组，内部读取的errors是组件首次渲染时的闭包快照，永远是初始的空对象{}。多个子组件同时触发更新时，每次都是基于空对象添加当前子组件的错误信息，后面的更新会直接覆盖之前的更新结果，最终只保留最后一个子组件的内容。

修复方案 #

使用setErrors的函数式更新写法，每次更新都基于上一次最新的状态，而非闭包缓存的旧状态：

useEffect(() => {
  setErrors(prevErrors => ({
    ...prevErrors,
    [type]: localError
  }));
}, [type, localError]);

注意：需要把type和localError添加到依赖数组中，避免后续这两个值变化时无法同步更新到全局errors。

问题2：内容相同仍触发setErrors的问题 #

原因 #

React的useState更新默认做浅比较判断是否触发重渲染。你每次都通过{...errors}创建了全新的对象引用，哪怕两个对象的内容完全一致，引用地址不同就会被判定为状态变更，触发更新。

修复方案 #

在更新前先判断对应字段是否已经和目标值一致，如果没有变化就直接返回原状态对象，复用原有引用避免不必要的更新：

useEffect(() => {
  setErrors(prevErrors => {
    // 对应字段值未变化时返回原对象，不触发更新
    if (prevErrors[type] === localError) return prevErrors;
    return {
      ...prevErrors,
      [type]: localError
    };
  });
}, [type, localError]);

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