如何阻止 React 按钮同步呈现？

Question

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


<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>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

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

我重构了一些逻辑并添加了我理解您想要的功能。特别是 increase/decrease 逻辑。

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

如何阻止 React 按钮同步呈现？

How can I stop the React buttons from rendering synchronously?

javascript

button

reactjs