React.js事件需要点击两次才能执行。

Question

我正在使用React.js构建生命游戏，但遇到了一个棘手的问题： 我设置了每个事件为onClick={ event }，但需要点击两次才能执行。

让我进一步描述一下： 如下所示，我有两个按钮（一个按钮是用于将板子的大小更改为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>
        )
    }
});

- pexea12

---

你使用 bind 和 smallSize 是什么意思？我认为这个方法很好，只是 onClick 的效果没有起作用。 - pexea12

你有 this.clear.bind(this) 但没有 this.smallSize.bind(this) - 即使第二个函数似乎在实现中使用了 this (this.clear(10,10))。这不应该导致你看到的问题，但它似乎有点奇怪。 - Ashley Coolman

我相信对于每个方法，React都会自动绑定this。因此，在这里我们不需要使用.bind(this)。 - pexea12

好的，我刚刚检查了一下 - 使用es6类的组件不支持autobind（这是我使用的）。继续！ - Ashley Coolman

也许是因为你在那个调用中设置了两次状态。我不这么认为，但尝试在同一个 this.setState 调用中设置宽度、高度和板块。 - ZekeDroid

Answer 1

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

在clear()方法中，您设置了宽度和高度状态。但是在内部，当它们调用setSize()方法时，它们不会立即更新。只有当它们到达render方法时才会更新。

当您第二次点击按钮时，状态将正确更新。这就是为什么第二个实例可以正常工作的原因。

一种解决方案是不要将宽度和高度作为状态保留，而是将其作为props使用。将10 * 10作为单独的默认prop，并在setSize方法中使用它。

- John Peter