React多子元素场景下state值丢失问题求助

问题根源 #

你遇到的问题核心是闭包+useState异步更新导致的：每个子组件的useEffect捕获的是组件挂载时的childStates初始值（空对象），当多个子组件依次调用更新方法时，都是基于这个旧的空对象去设置新值，后面的子组件状态会直接覆盖前面的，最终只保留最后一个的状态。

解决方案：使用函数式更新合并状态 #

把父组件中更新状态的逻辑改成函数式更新，这样每次更新都能拿到最新的childStates，再合并新的子组件状态，而不是基于闭包里的旧值覆盖。

修改后的核心代码：

1. 父组件的状态更新函数：

const handleChildChange = (id, value) => {
  // 用函数式更新，prevStates是当前最新的状态
  setChildStates(prevStates => ({
    ...prevStates,
    [id]: value // 按子组件id合并，不会覆盖其他子组件状态
  }));
};

2. 子组件的useEffect确保依赖项完整：

useEffect(() => {
  onChildChange(id, count);
}, [count, onChildChange, id]); // 把id和onChildChange加入依赖，避免闭包问题

3. 父组件传递回调时，用useCallback包裹（可选，但能优化子组件渲染）：

const handleChildChange = useCallback((id, value) => {
  setChildStates(prevStates => ({
    ...prevStates,
    [id]: value
  }));
}, []);

效果说明 #

这样修改后，每个子组件更新状态时，都会基于当前最新的childStates进行合并，不会再出现前面子组件状态被覆盖的情况，控制台就能看到所有子组件的状态都被正确收集到父组件中。

内容的提问来源于stack exchange，提问作者Gokul.M