在 react 中更新对象状态时，若只修改某一个属性却意外重置了其余属性，通常是因为未正确保留原状态。解决方案是使用函数式更新结合扩展运算符，确保新状态基于旧状态完整继承并仅修改目标字段。

在 react 中更新对象状态时，若只修改某一个属性却意外重置了其余属性，通常是因为未正确保留原状态。解决方案是使用函数式更新结合扩展运算符，确保新状态基于旧状态完整继承并仅修改目标字段。

在构建篮球记分板这类状态密集型应用时，每个球队通常以对象形式管理多个计数器（如得分、命中数、出手数等）。若直接向 setState 传入一个不完整的对象（例如 { fga: team1.fga + 1 }），React 会完全替换整个 state 对象，导致 score、fgm、threePm 等未显式声明的字段被设为 undefined 或初始值（如 0），从而造成数据丢失。

✅ 正确做法是：使用函数式更新（updater function）获取前一状态，并通过扩展运算符（...）保留所有原有属性，再覆盖指定字段。这样既保证了状态的不可变性，又避免了竞态条件问题：

React Router Code Review

审查 React Router 代码，确保数据加载、变更、错误处理和导航模式符合规范，适用于 React Router v6.4+ 代码、加载器及其他特性。

下载

<button
  id="miss"
  onClick={() =>
    setTeam1((prev) => ({
      ...prev, // 完整复制上一状态的所有属性
      fga: prev.fga + 1, // 仅更新 fga 字段
    }))
  }
>
  Miss
</button>

⚠️ 注意事项：

• 必须使用函数式更新（即 setTeam1(prev => {...})），尤其当新状态依赖于前一状态时。直接使用 team1 变量可能导致闭包中捕获过期状态（例如连续快速点击时计数错误）；
• 扩展运算符 ...prev 是浅拷贝，适用于本例中纯数字/基础类型的对象；若 state 包含嵌套对象或数组，需额外深拷贝处理；
• 同理，其他操作（如加一分、投进三分）也应遵循相同模式：

  // 加 2 分
  onClick={() => setTeam1(prev => ({ ...prev, score: prev.score + 2 }))}
  // 投进三分球
  onClick={() => setTeam1(prev => ({ 
    ...prev, 
    score: prev.score + 3, 
    fgm: prev.fgm + 1, 
    fga: prev.fga + 1,
    threePm: prev.threePm + 1 
  }))}

总结：React 的 useState 要求状态更新必须是“替换”而非“合并”，因此开发者需主动承担状态合并逻辑。掌握 prev => ({ ...prev, key: newValue }) 这一范式，是安全、可维护地管理复合状态的关键基础。