React Hook 基于useState实现点击触发对象数组内球员分数增量更新

你目前编写的handleScoreChange存在三处会直接导致功能失效的问题：

• 状态返回结构错配：players本身是由全部球员信息组成的数组，你在setPlayers的更新回调里直接返回了单个对象，运行时会把原有的球员数组结构直接覆盖
• 直接修改原状态：player[index].score += delta是对原数组元素属性的直接改写，违反React状态不可变的更新原则，就算逻辑正确也无法触发组件的预期重渲染
• 未生成新的数组实例：更新数组类状态时，必须返回全量的新数组结构，仅返回单个修改后的球员对象完全不符合React状态更新的要求

参考以下逻辑完成分数更新，全程不直接修改原状态，通过浅拷贝生成新的状态对象触发更新：

const handleScoreChange = (index, delta) => { 
  setPlayers(prevPlayers => {
    // 基于原数组遍历生成全新的数组实例
    return prevPlayers.map((player, currentIdx) => {
      // 匹配到需要更新的目标球员时，返回带最新分数的浅拷贝对象
      if (currentIdx === index) {
        return {
          ...player,
          score: player.score + delta
        }
      }
      // 非目标球员保留原对象引用，减少不必要的性能损耗
      return player
    })
  })
}

• 渲染球员列表时，需要给加分按钮传入当前列表项对应的索引值和固定增量（本次需求中为1），绑定示例：

  {players.map((player, index) => (
    <div key={player.id}>
      <p>{player.name} 当前得分：{player.score}</p>
      <button onClick={() => handleScoreChange(index, 1)}>得分+1</button>
    </div>
  ))}
  

• 优化建议：如果后续会涉及球员排序、增删的操作，用索引值做匹配依据容易出现错位，更稳定的写法是直接用球员唯一的id作为匹配标识，把更新逻辑里的索引判断替换为id匹配即可。

避坑提醒：不要在状态更新的计算逻辑里用+=做分数累加，这个操作会直接修改原对象的属性，一定要通过赋值计算得到最新分数后再写入新对象。

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