React中useEffect数据写入冲突：子组件初始化父状态被覆盖

你的问题根源在于：两个子组件挂载时，useEffect依赖数组为空，因此它们拿到的errors都是父组件初始的空对象快照。第一个子组件将errors更新为{"1":0}后，第二个子组件的setErrors仍然基于初始的空对象进行扩展，最终覆盖了之前的结果。

解决方案：使用函数式更新 #

React的setState支持传入函数，该函数会接收当前最新的state值作为参数，确保每次更新都基于最新状态，不会出现覆盖问题。

修改后的Child.js代码：

export default function Child(props){
    useEffect(() => {
        // 用函数式更新获取最新的errors状态
        props.setErrors(prevErrors => ({
            ...prevErrors, 
            [props.identifier]: 0
        }));
    }, [props.setErrors, props.identifier]); // 添加必要依赖，避免ESLint警告
    return null;
}

同时修正Parent.js中的JSX语法错误（原代码里的<React.Component>是错误写法，应使用片段或容器元素）：

export default function Parent(props){
   const [errors, setErrors] = React.useState({});
   return (
       <>
           <Child errors={errors} setErrors={setErrors} identifier="1"/>
           <Child errors={errors} setErrors={setErrors} identifier="2"/>
           {JSON.stringify(errors)}
       </>
   );
}

效果说明 #

修改后，每个子组件挂载时都会基于当前最新的errors对象添加自身的标识符键值对，最终得到期望的{"1":0,"2":0}。后续新增子组件时，只需传入新的identifier，errors对象会自动扩展，无需在父组件提前编写初始化代码。

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