如何解决React中点击计分按钮后所有玩家分数同步更新的问题

你代码的核心问题有3个：

1. 所有玩家的分数展示都绑定了同一个全局count状态，修改这个状态自然所有玩家的分数都会同步更新
2. playerScore数组的结构设计不合理，每个玩家对象的属性名不统一，且没有为每个玩家单独存储分数字段
3. 增减分数的事件没有区分触发对象，无法定位要修改哪个玩家的分数

修改后可正常运行的完整代码如下：

import "./styles.css";
import { useState } from 'react';

export default function App() {
  // 统一玩家数据结构，每个玩家包含名称和独立分数
  const [playerScore, setPlayerScore] = useState([
    {
      name: 'Player 1',
      score: 0
    }, 
    {
      name: 'Player 2',
      score: 0
    }
  ]);

  // 接收玩家索引作为参数，修改对应玩家的分数
  const increase = (index) => {
    setPlayerScore(prev => {
      return prev.map((player, i) => {
        if (i === index) {
          return {...player, score: player.score + 1}
        }
        return player
      })
    })
  };

  const decrease = (index) => {
    setPlayerScore(prev => {
      return prev.map((player, i) => {
        if (i === index) {
          return {...player, score: player.score - 1}
        }
        return player
      })
    })
  };

  return (
    <main>
      {/* 直接遍历玩家数组渲染，避免重复代码 */}
      {playerScore.map((player, index) => (
        <div key={index}>
          <div>
            <h2 className="name">{player.name}</h2>
          </div>
          <div>
            <div className="score">{player.score}</div>
            <button onClick={() => increase(index)}>
              Increase
            </button>
            <button onClick={() => decrease(index)}>
              Decrease
            </button>
          </div>
        </div>
      ))}
    </main>
  );
}

本次修改的核心逻辑：

• 调整了playerScore的数据结构，每个玩家对象统一包含name和score属性，每个玩家的分数独立存储
• 给增减方法增加了玩家索引参数，点击按钮时传入当前玩家的索引，只会修改对应玩家的分数
• 优化了渲染逻辑，直接遍历玩家数组生成DOM，减少重复代码

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