Javascript 反应，在石头、布、剪刀游戏中创造分数

我正在尝试使用React为一个石头剪刀布游戏添加分数。我对反应非常陌生，所以不太确定我是否正确地实施了它

class App extends Component {
state = {
    playerOne: weapons[0],
    computer: weapons[0],
    winner: "",
    playerWins: 0,
    computerWins: 0,
    draws :0

};

startGame = () => {
    let counter = 0;
    let gameInterval = setInterval(() => {
        counter ++;
        this.setState({
            computer: weapons[Math.floor(Math.random() * weapons.length)],
            winner: "",
            playerWins: 0,
            computerWins: 0,
            draws :0
        });
        if (counter > 5) {
            clearInterval(gameInterval);
            this.setState({
                winner: this.Winner()
            });
        }
    }, 250);
};

Winner = () => {
    const { playerOne, computer } = this.state;

    if (playerOne === computer){
        draws++;
        return "It's a Draw!!";

    } else if (
        (playerOne === "rock" && computer === "scissors") ||
        (playerOne === "scissors" && computer === "paper") ||
        (playerOne === "paper" && computer === "rock")
    ) {
        playerWins++;
        return "Player One Wins!"
        
    } else {
        computerWins++
        return "The computer Wins!"
    }
};

selectWeapon = weapon => {
    this.setState({
        playerOne: weapon,
        winner: "",
        score: 0
    });
};

render() {
    const { playerOne, computer, winner, score } = this.state;
    return (
      <>
        <h1 style={{ textAlign: "center" }}>Rock Paper Scissors</h1>

        <div>
          <Player weapon={playerOne} />
          <Player weapon={computer} />
        </div>
        <div>
          <button
            className="weaponBtn"
            onClick={() => this.selectWeapon("rock")}
          >
            rock
          </button>
          <button
            className="weaponBtn"
            onClick={() => this.selectWeapon("paper")}
          >
            paper
          </button>
          <button
            className="weaponBtn"
            onClick={() => this.selectWeapon("scissors")}
          >
            scissor
          </button>
        </div>
        <div className="winner">{winner ? this.Winner() : null}</div>
        <div className="winner">Player One: {score ? null: playerWins}</div>
        <div className="winner">Computer: {score ? null: computerWins}</div>
        <div className="winner">Draws: {score ? null: draws}</div>
        <button type="button" onClick={this.startGame}>
          Start!
        </button>
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);**strong text**

类应用程序扩展组件{
状态={
玩家指南：武器[0]，
计算机：武器[0]，
获胜者：“，
玩家：0，
计算机胜：0，
抽签：0
};
StartName=（）=>{
设计数器=0；
让gameInterval=setInterval（（）=>{
计数器++；
这是我的国家({
计算机：武器[Math.floor（Math.random（）*武器.length）]，
获胜者：“，
玩家：0，
计算机胜：0，
抽签：0
});
如果（计数器>5）{
clearInterval（gameInterval）；
这是我的国家({
赢家：这个。赢家（）
});
}
}, 250);
};
获胜者=（）=>{
const{playeron，computer}=this.state；
如果（播放者===计算机）{
绘图++；
返回“平局！！”；
}否则如果(
（游戏指南==“石头”和计算机==“剪刀”）||
（游戏指南==“剪刀”和计算机==“纸”）||
（游戏指南===“纸张”和计算机===“岩石”）
) {
playerWins++；
return“玩家一赢！”
}否则{
计算机胜利者++
return“计算机赢了！”
}
};
选择武器=武器=>{
这是我的国家({
队长：武器，
获胜者：“，
分数：0
});
};
render（）{
const{playeron，computer，winner，score}=this.state；
返回(
石头剪子布
这个。选择武器（“岩石”）}
>
岩石
这个。选择武器（“纸张”）}
>
纸张
这个。选择武器（“剪刀”）}
>
剪
{winner？this.winner（）：null}
一号玩家：{得分？空：玩家}
计算机：{score？null:computerWins}
绘制：{score？null:Draws}
开始
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）**强文本**

我遇到了一个问题，分数增加了2，如果是平局，电脑赢了，或者玩家赢了。我不知道为什么每次游戏结束时它都会增加2。我还不太了解“道具”的属性，所以认为这可能与此有关，任何帮助都将不胜感激

---

谢谢。

您应该将它们设置为状态，而不是draws++、playerWins++、computerWins++

this.setState( prev => ({ ...prev, draws: prev.draws+1}))

this.setState( prev => ({ ...prev, playerWins: prev.playerWins+1}))

this.setState( prev => ({ ...prev, computerWins: prev.computerWins+1 }))

这是如何设置状态的

this.setState( prev => ({ ...prev, draws: prev.draws+1}))

this.setState( prev => ({ ...prev, playerWins: prev.playerWins+1}))

this.setState( prev => ({ ...prev, computerWins: prev.computerWins+1 }))

此外，您没有在您所在的州声明“分数”。你是如何得出分数的

---

您应该将所有内容都存储在状态中。

每当组件重新呈现函数时，

Winner（）

就会执行。我认为这就是增加2的原因。

this.setState( prev => ({ ...prev, draws: prev.draws+1}))

this.setState( prev => ({ ...prev, playerWins: prev.playerWins+1}))

this.setState( prev => ({ ...prev, computerWins: prev.computerWins+1 }))