React - 我必须点击一个按钮三次才能生效

Question

所以我正在尝试制作“Rock Paper Scissors”游戏，一切似乎都可以解决，但是当我点击一个按钮时，例如“Rock”，我必须点击它三次才能让它工作。

这是我的代码：

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>
    );
}

对不起，如果我的代码很庞大，但我只是从 React 开始，我打算在解决这个问题后缩短它。

提前致谢。

Answer 1

React 状态是异步的，这意味着当您调用 calculateWinner 时，您仍然没有函数范围内的最后推送状态。