React useEffect 如何正确合并对象状态

在 React 中使用 useEffect 更新对象状态时，需避免在循环中多次调用 setState；应先构建完整的新状态对象，再一次性更新，以防止状态覆盖或异步竞态问题。

在 React 函数组件中处理状态更新，特别是涉及对象合并的场景，开发者常遇到的陷阱是异步竞态导致的数据丢失。许多开发者在循环中直接调用 setState，最终发现状态与预期严重不符，可能出现字段缺失或数值错误。

问题根源在于 React 的状态更新是异步的，且可能被批量合并。如果在 useEffect 的循环中多次调用 setState，即使使用函数式更新（prevState => newState），仍然容易出错。原因在于每次迭代时获取的“前一个状态”往往不是上一轮循环更新后的最新状态，而是该 effect 开始执行时的初始快照。

这种情况好比多人同时在一张纸上修改，但大家都只看到最初的复印件，结果后写的内容会覆盖先写的内容。反映到代码中，最终可能只保留最后一次 setState 的结果，前面循环设置的键值对全部丢失。

正确的解决思路

核心原则只有一个：先计算，后提交。不要在循环中急于提交状态变更，而应在循环外部，基于当前状态完整计算出最终的新状态对象。计算完成后，一次性调用 setState 提交这个完整对象。

这样做的好处显而易见：状态更新具有确定性和完整性，完全规避异步更新带来的竞态风险。

以下是推荐的实现方式：

useEffect(() => {
  if (!meDataData.lifeStyle) return;

  // 第一步：基于当前状态创建新对象副本
  const newInfo = { ...additionalInfo };

  // 第二步：在副本上进行所有修改
  for (const [key, value] of Object.entries(meDataData.lifeStyle)) {
    if (typeof value === 'string' && value.includes('!')) {
      newInfo[key] = value.slice(0, -1); // 移除末尾的 '!'
    }
  }

  // 第三步：一次性提交完整新状态
  setAdditionalInfo(newInfo);
}, [meDataData.lifeStyle, additionalInfo]); // 注意依赖项

几个关键的注意事项

按照上述模板编写基本不会出错，但有几个细节必须留意，否则可能引入新的问题。

• 依赖数组不能缺失：示例中 effect 依赖了 additionalInfo。这一点很关键，因为 newInfo 是基于它构建的。如果 additionalInfo 在其他地方更新，而此 effect 因依赖项缺失未重新执行，则合并进去的将是过时的旧状态。
• 增强类型安全：循环中添加了 typeof value === 'string' 的判断。这看似多余，实则是防御性编程。如果 lifeStyle 对象中某个值为 null 或 undefined，直接调用 .includes() 会立即引发运行时错误。
• 绝对不要在循环内调用 setState：这一点无论如何强调都不为过。即使考虑使用函数式更新，React 也不保证多次连续 setState 调用的原子性和顺序。在并发模式下，这种行为的结果更加不可预测。
• 浅拷贝与深拷贝：示例中使用对象展开语法进行浅拷贝，这对扁平结构的对象足够。但如果状态对象嵌套较深（包含多层对象或数组），浅拷贝会导致新旧状态中嵌套引用共享，可能引发意外副作用。此时需要采用深拷贝方案，或直接使用 Immer 等不可变数据辅助库，使代码更清晰安全。

总之，在 React 中管理状态，尤其是派生状态，最佳实践是追求“确定性”。每次状态更新都应当基于明确的快照，生成完整的新快照。“先构建，后提交”的模式正是确保状态变更可预测、可维护的稳健之道。掌握这一原则，便能避开绝大多数因状态合并引发的诡异问题。