在 react 函数组件中，多个子组件通过 useeffect 并发调用父组件的 seterrors 时，若直接传入新对象会因闭包捕获过期 state 导致状态覆盖；应改用函数式更新（prev => {...prev, [key]: value}）确保基于最新状态合并。
当多个子组件（如 <Child identifier="1" /> 和 <Child identifier="2" />）在挂载时各自调用 props.setErrors({...props.errors, [props.identifier]: 0})，看似合理，实则存在竞态风险：两个 useEffect 均在初始渲染后触发，但它们读取的 props.errors 都是初始空对象 {}（即 useState({}) 的初始值），因此两次更新均基于 {} 构建新对象，最终仅保留最后一次执行的结果——例如 {"2": 0}，而 "1" 被丢失。
根本原因在于：setState 的普通调用（非函数式）不保证基于最新状态计算，而是基于调用时刻捕获的 state 值。React 可能批量处理多个 setErrors 调用，若未显式声明依赖最新状态，就会发生状态“丢失更新”（lost update）。
✅ 正确解法：使用函数式更新（Functional Update）
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
// Child.js
export default function Child({ errors, setErrors, identifier }) {
useEffect(() => {
setErrors(prev => ({ ...prev, [identifier]: 0 }));
}, [identifier, setErrors]); // identifier 可选（稳定），setErrors 通常稳定，可省略；建议保留 identifier 以明确依赖
return null;
}该写法中，setErrors(prev => {...}) 告诉 React：“请将我的更新逻辑应用到当前最新的 state 上”，无论多少个子组件并发触发，React 都会按顺序将每个 updater 应用于前一个结果，最终得到完整合并状态：{"1": 0, "2": 0}。
? 注意事项：
- 依赖数组需严谨：useEffect 的依赖项 [identifier, setErrors] 中，setErrors 由 useState 生成，默认稳定，可省略；但显式列出 identifier 更利于可读性与未来扩展（如 identifier 动态变化）。
- 避免重复初始化：父组件无需预定义所有 key，子组件自主注册机制天然支持动态增删（如新增 <Child identifier="3" /> 会自动加入 errors）。
- 性能无额外开销：函数式更新本身不触发额外渲染，且对象展开操作轻量，适用于数百级键值场景。
- 不可替代 useReducer 的复杂场景：若后续需支持删除、重置、校验链等逻辑，建议升级为 useReducer 管理 errors 状态机。
? 总结：在跨组件协同初始化共享状态时，永远优先选择函数式 setState —— 它是 React 应对并发更新的内置保障机制，既简洁又健壮，是编写可预测、可维护 React 状态逻辑的关键实践。
