Reactjs 反应-我必须点击一个按钮三次，它才能生效

所以我试着做一个“石头剪纸”游戏，一切似乎都很顺利，但是当我点击一个按钮，比如“石头”时，我必须点击它三次才能让它正常工作

这是我的代码：

class RPSGame extends Component {
constructor(props) {
    super(props);
    this.state = {
        p1Option: 'rock',
        p2Option: 'rock',
        winner: 'Tie',
        winnerMsg: 'Its a Tie!'
    };
    this.handleClick = this.handleClick.bind(this);
    this.calculateWinner = this.calculateWinner.bind(this);
}
handleClick(e) {
    this.setState({ p1Option: e.option });
    this.calculateWinner();
}
calculateWinner() {
    let { p1Option, p2Option } = this.state;

    if (p1Option === p2Option) {
        this.setState({ winner: 'Tie' });
    } else if (
        (p1Option === 'rock' && p2Option === 'paper') ||
        (p1Option === 'paper' && p2Option === 'scissors') ||
        (p1Option === 'scissors' && p2Option === 'rock')
    ) {
        this.setState({ winner: 'Player Two' });
    } else if (
        (p1Option === 'rock' && p2Option === 'scissors') ||
        (p1Option === 'paper' && p2Option === 'rock') ||
        (p1Option === 'scissors' && p2Option === 'paper')
    ) {
        this.setState({ winner: 'Player One' });
    } else {
        console.log('error!');
    }
}

在我的渲染中：

    render() {
    const { handleClick } = this;
    const {  p1Option, p2Option } = this.state;
    return (
        <div>
            <h1>Rock Paper Scissors</h1>
            <p>Player 1 chose: "{p1Option}"</p>
            <p>Player 2 chose: "{p2Option}"</p>
            <button
                onClick={() =>
                    handleClick({
                        option: 'rock'
                    })}
            >
                Rock
            </button>
            <button
                onClick={() =>
                    handleClick({
                        option: 'paper'
                    })}
            >
                Paper
            </button>
            <button
                onClick={() =>
                    handleClick({
                        option: 'scissors'
                    })}
            >
                Scissors
            </button>
        </div>
    );
}

render（）{
const{handleClick}=this；
const{p1Option，p2Option}=this.state；
返回(
石头剪子布
玩家1选择：“{p1Option}”

玩家2选择：“{p2Option}”

手舔({
选项：“摇滚乐”
})}
>
摇滚乐
手舔({
选项：“纸张”
})}
>
纸张
手舔({
选项：“剪刀”
})}
>
剪刀
);
}

抱歉，如果我的代码太大，但我只是从React开始，我计划在解决这个问题后缩短它

---

提前感谢。

React状态是异步的，这意味着当您调用

calculateWinner

时，您仍然没有函数作用域中的最后一个推送状态。

我明白了。。。那么我该如何解决它呢？您可以简单地将函数作为第二个参数传递给setState。此函数在您的状态发生变化后运行。谢谢给你们两个！，我没有在设置状态后传递calculateWinner，而是将其作为第二个参数传递。