React中如何异步获取多个子组件数据避免父组件状态被覆盖

问题原因 #

你遇到的覆盖问题是React useState的闭包陷阱+批量更新机制共同导致的：
父组件首次渲染时生成的updateNameInParent函数，闭包内引用的childObjects始终是初始的空数组。四个子组件的useEffect在挂载阶段几乎同时触发回调，每次调用updateNameInParent都是基于空数组追加元素，而React会把短时间内的多次setState合并为一次更新，最终只有最后一次的操作结果会被保留。

解决方案 #

只需要修改父组件的状态更新逻辑，改用useState的函数式更新写法即可，不需要额外引入lodash克隆：

// 修改前的代码
const updateNameInParent = async (myObj) => {
  const objectsClone = _.cloneDeep(childObjects);
  const newObj = [...objectsClone, myObj];
  setChildObjects(newObj);
}

// 修改后的代码
const updateNameInParent = (myObj) => {
  // 函数式更新的入参prev永远指向最新的state值，不受闭包影响
  setChildObjects(prev => [...prev, myObj]);
}

补充说明 #

• 原来的async关键字在当前逻辑里没有异步操作，可以直接删除，不影响功能。
• 如果后续你存入数组的是复杂对象，需要深克隆避免引用问题，只需要在函数式更新内部处理即可：setChildObjects(prev => [..._.cloneDeep(prev), myObj])
• 这种写法不要求子组件的调用顺序，所有数据都会被完整收集，符合你的需求。

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