javascript - setState 更新所有状态值而不是单独更新？

Question

开始学习 React，在我的项目中，我试图在每个玩家单击按钮时为他们生成一个随机数。我正在NumberGenerator为两个玩家重复使用该组件，但不幸的是，此时每个按钮单击都会同时为两个玩家设置状态，并且不允许单独更新状态。谁可以帮我这个事？

珍惜你的时间，

    class App extends React.Component {
           state = {
            userScores : [
              {score: 0}
              {score: 0}
            ],
              buttonToggle: "enabled"
          }

 generateRandomNumber = (player) => {
    let randomNumber = Math.round(Math.random() * 100);
    if (player === 1) {
    this.setState({
      userScores : [
        {score: randomNumber}
      ],
        buttonToggle: '' 
    })
  } else {
    this.setState({
      userScores : [
        {score: randomNumber}
      ],
        buttonToggle: '' 
    })
  }
}

        render() {
          return (
            <div className="App">
              <h1> <u> Death Roll</u> </h1>
              <h4> Player 1 </h4>
              <NumberGenerator id = "p1" userscores = {this.state.userScores[0].score} generate = {() => this.generateRandomNumber(1)} buttontoggle = {this.state.buttonToggle}  />
              <h4> Player 2 </h4>
              <NumberGenerator userscores = {this.state.userScores[1].score} generate = {() => this.generateRandomNumber(2)} buttontoggle = {this.state.buttonToggle}  /> 
              <ScoreCard number = {this.state.userScores[1].score} />
            </div>
          );
          }
        }

标签： javascriptreactjsstate