javascript - React.js 事件需要点击 2 次才能执行

Question

我正在通过 React.js 构建生命游戏，但我陷入了一种不舒服的境地: 我设置为 onClick={ event } 的每个事件都需要 2 次点击才能执行。

让我描述更多: 正如您在下面的代码中看到的，我有 2 个按钮(一个按钮用于将板的大小更改为 10 x 10，另一个按钮用于更改间隔的速度)。

一切正常，只是我点击这两个按钮时，需要双击执行。在第一次点击时，使用 Chrome 中的 React Developer Tool，我可以看到包括 width, height, speed 在内的状态发生了变化，但是状态 board 仍然保持不变。只有在第二次点击后，board 状态才会改变。

谁能解释原因并告诉我如何解决？谢谢

这是我的部分代码

var GameBoard = React.createClass({
    getInitialState: function() {
        return {
             width: 10,
             height: 10,
             board: [],
             speed: 1000,
        };
    },

    // clear the board to the initial state
    clear: function(width, height) {
        this.setState({
            width: width,
            height: height,
        });
        this.setSize();
        clearInterval(this.game);
    },

     // set the size of the board
     setSize: function() {
        var board = [];
        for (var i = 0; i < this.state.height; ++i) {
            var line = [];
            for (var j = 0; j < this.state.width; ++j)
                line.push(0);
            board.push(line);
        }
        this.setState({
            board: board
        });
    },

    // start the game
    start: function() {
        this.game = setInterval(this.gameOfLife, this.state.speed);
    },

    gameOfLife: function() { // game of life },

    // change the speed of the game
    changeSpeed: function(speed) {
        this.setState({ speed: speed });
        clearInterval(this.game);
        this.start();
    },

    // change the size to 10 x 10
    smallSize: function() {
        this.clear(10, 10);
    },

    render: function() {
        return (
            <div className="game-board">
                <h1>Conway's Game of Life</h1>
                <h2>Generation: { this.state.generation }</h2>
                <div className="control">
                    <button className="btn btn-default" onClick={ this.start }>Start</button>

                </div>

                <Environment board={ this.state.board } onChangeSquare = { this.onChangeSquare }/>

                <div className="size">
                    <h2>Size</h2>
                    <button className="btn btn-default" onClick={ this.smallSize }>Small (10 x 10)</button>
                </div>

                <div className="speed">
                    <h2>Speed</h2>
                    <button className="btn btn-default" onClick={ this.changeSpeed.bind(this, 900) }>Slow</button>
                </div>
            </div>
        )
    }
});

Answer 1

原因是组件的状态不会立即改变。

在 clear() 方法中，您设置宽度和高度状态。但在内部，当他们对 setSize() 方法使用react时，他们不会立即更新。它们只有在到达渲染方法时才会更新。

当您第二次单击按钮时，状态会正确更新。这就是它在第二种情况下起作用的原因。

一个解决方案请不要保留宽度和高度，因为在 Prop 中使用它。将 10 * 10 保留为单独的默认属性，并在 setSize 方法中使用它。