如何阻止 React 按钮同步渲染？

Question

每次我点击某个玩家的“增加”或“减少”按钮时，我只想增加那个玩家的分数。但是，现在当我单击其中一个按钮时，它会增加两个分数。我知道这可能是我完全忽略的简单事情，但感谢您提供任何帮助。先感谢您！ 这是我的代码https://codesandbox.io/s/objective-curran-6ogn3?file=/src/App.js:0-2090：

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

export default function App() {
  const [count, setCount] = useState(0);

  const [playerScore, setplayerScore] = useState([{
    nameOne: 'Player 1'
  }, {
    nameTwo: 'Player 2'
  }
]);

  const increase = () => {
    setCount(count + 1);
    setplayerScore(playerScore);
  };

  const decrease = () => {
    setCount(count - 1);
    setplayerScore(playerScore);
  };

  return (
    <main>
    {/* player 1*/}
      <div>
          {playerScore.map((player) => {
            return (
              <div>
                <h2 className="name">{player.nameOne}</h2>
              </div>
            );
          })}
      </div>
      <div>
        <div className="score">{count}</div>
        {/* increase button */}
          <button onClick={increase}>
            Increase
          </button>

        {/* decrease button */}
          <button onClick={decrease}>
            Decrease
          </button>
      </div>

    {/* player 2 */}
    <div>
          {playerScore.map((player) => {
            return (
              <div>
                <h2 className="name">{player.nameTwo}</h2>
              </div>
            );
          })}
      </div>
      <div>
        <div className="score">{count}</div>
        <section>
          <button onClick={increase}>Increase</button>
          <button onClick={decrease}>Decrease</button>
        </section>
      </div>
    </main>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

我根据你的代码做了这个分叉。 https://codesandbox.io/s/cranky-hooks-q9ntu?file=/src/App.js

我已经重构了一些逻辑并添加了我理解你想要的功能。特别是增加/减少逻辑。

主要错误是您对整个数组使用相同的状态，因此所有项目的值将始终相同。