在 react 中更新对象状态时，若只修改某一个字段却意外重置其他字段，通常是因为未正确保留原有状态。本文详解如何利用函数式更新与展开运算符，精准更新对象中的单一属性而不影响其余字段。
在 react 中更新对象状态时，若只修改某一个字段却意外重置其他字段，通常是因为未正确保留原有状态。本文详解如何利用函数式更新与展开运算符，精准更新对象中的单一属性而不影响其余字段。
在开发篮球记分板这类状态密集型应用时，每个队伍常被建模为一个包含多个统计字段（如 score、fgm、fga、threePm）的对象。此时，若使用 setState 直接传入一个新对象（如 { fga: team1.fga + 1 }），React 会完全替换整个 state 对象，导致未显式声明的字段（如 score、fgm）被设为 undefined 或初始值（实际表现为重置为 0），从而引发数据丢失。
✅ 正确做法是：使用函数式更新（updater function）结合对象展开语法（...），确保新状态基于最新旧状态构建：
<button id="miss" onclick="{()">
setTeam1(prev => ({
...prev, // 完整复制当前所有属性
fga: prev.fga + 1 // 仅覆盖需更新的字段
}))
}
>
Miss
</button>
该写法的关键优势在于：
- ✅ 避免竞态问题：prev => ({ ...prev, ... }) 确保获取的是最新状态，尤其在快速连续点击时仍可靠；
- ✅ 保持不可变性：不直接修改原对象，而是创建新对象，符合 React 状态更新规范；
- ✅ 零冗余代码：无需手动列出所有字段，扩展性好（新增字段如 rebounds 或 assists 也无需修改此逻辑）。
⚠️ 注意事项：
- 切勿在 setState 中传入普通对象字面量（如 setTeam1({ fga: team1.fga + 1 })），这会导致其他字段丢失；
- 若状态嵌套较深（如 team1.stats.fga），可考虑使用 Immer 简化不可变更新，但对扁平对象，... 已足够高效；
- 所有类似操作（如加一分、记三分命中）均应沿用同一模式，保证状态更新的一致性与可维护性。
总结：精准更新对象状态的核心是「函数式更新 + 展开复制 + 局部覆盖」。这一模式既简洁又健壮，是 React 开发中处理复合状态的必备实践。
