在 react 中更新对象状态时，若只修改某一个字段却意外重置了其他字段，通常是因为未正确保留原有状态。本文详解如何通过函数式更新和展开运算符精准更新对象中的单一属性，避免状态丢失。
在 react 中更新对象状态时，若只修改某一个字段却意外重置了其他字段，通常是因为未正确保留原有状态。本文详解如何通过函数式更新和展开运算符精准更新对象中的单一属性，避免状态丢失。
在构建篮球记分板等状态复杂的 React 应用时，团队数据常以对象形式管理（如 score、fgm、fga、threePm）。若直接调用 setState({ fga: team1.fga + 1 })，会完全替换整个对象，导致 score、fgm 等未显式声明的属性被设为 undefined（最终在渲染中表现为 0 或 NaN），造成状态丢失。
✅ 正确做法是：使用函数式更新 + 展开运算符（...），确保新状态基于最新旧状态构建：
<button id="miss" onclick="{()">
setTeam1(prev => ({
...prev, // 完整保留当前所有属性
fga: prev.fga + 1, // 仅更新 fga 字段
}))
}
>
Miss
</button>
这里的关键点有三：
- 必须使用函数式更新形式 setTeam1(prev => {...})：避免闭包中捕获过期的 team1 值（尤其在快速连续点击或异步场景下）；
- ...prev 是必需的：它将原对象所有属性浅拷贝到新对象中，保证未修改字段不丢失；
- 更新逻辑写在返回对象内：清晰、不可变、符合 React 状态更新原则。
⚠️ 注意事项：
- 此方法仅适用于浅层对象。若对象嵌套较深（如 player.stats.fga），需逐层展开或改用 immer 等库；
- 不要混用对象字面量直接赋值（如 setTeam1({ fga: team1.fga + 1 })），这是常见错误根源；
- 所有状态更新都应视为“不可变操作”——永远返回新对象，而非修改原对象。
扩展示例：若还需同时更新多个字段（如“投篮不中但抢到前场篮板”），可一并写入：
setTeam1(prev => ({
...prev,
fga: prev.fga + 1,
score: prev.score + 0, // 显式保留（可省略，因已展开）
threePm: prev.threePm, // 同理
}));
掌握这一模式，不仅能解决记分板的 fga 更新问题，更是 React 对象状态管理的核心实践——精准、安全、可预测。
