React中如何仅更新对象状态的单个属性而保留其他属性？

你当前的问题是：调用setTeam1时传入了仅包含fga的新对象，React会用这个新对象完全替换原有的team1状态，导致其他未指定的属性被重置为初始值。

要实现仅更新指定属性、保留其余属性的效果，核心是保留原有对象的所有属性，再覆盖需要修改的属性，可以通过ES6对象展开运算符（...）实现：

修改后的按钮代码 #

<button
  id="miss"
  onClick={() =>
    setTeam1({
      ...team1, // 展开原有对象的全部属性，保留当前值
      fga: team1.fga + 1 // 仅更新fga属性
    })
  }
>
  Miss
</button>

更稳妥的函数式更新（推荐场景：频繁触发更新） #

如果你的更新逻辑依赖前一次的状态，建议用函数式更新的方式，避免因State异步更新导致的快照偏差：

<button
  id="miss"
  onClick={() =>
    setTeam1(prevTeam1 => ({
      ...prevTeam1,
      fga: prevTeam1.fga + 1
    }))
  }
>
  Miss
</button>

这种方式会接收前一次的状态prevTeam1作为参数，确保你始终基于最新的状态进行更新，在连续点击按钮这类场景下更可靠。

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