React js this.setState 无法正常工作

Question

我正在学习 React 并构建一个井字游戏。 我的代码如下：

var Square = React.createClass({
        getInitialState: function() {
            return { mark: this.props.mark,
                clicks: 0
             };
        },

        respondToClick: function() {    
            if(this.state.mark == '_') {    
                var nextClick = this.state.clicks + 1;

            }   
            var newMark = nextClick%2 ? 'X' : 'O';                  
                this.setState({mark: newMark, clicks: nextClick});              
        },  
        render: function(){
                return (<button className="square" onClick={this.respondToClick}>
                {this.state.mark}
                </button>
                );
        }
    });

    var Board = React.createClass({

         renderSquare: function(i) {
                return (<Square mark='_' />);
        },
        getInitialState: function() {
            return { 
                clicks: 0
             };
        },
        changeValue: function(i, val) {
                return (<Square value={val} />);
        },
        render: function() {
                const status = 'Next player: X';
                return (
                    <div>
                        <div className="status">{status}</div>
                        <div className="board-row">
                            {this.renderSquare(0)}
                            {this.renderSquare(1)}
                            {this.renderSquare(2)}
                        </div>
                        <div className="board-row">
                            {this.renderSquare(3)}
                            {this.renderSquare(4)}
                            {this.renderSquare(5)}
                        </div>
                        <div className="board-row">
                            {this.renderSquare(6)}
                            {this.renderSquare(7)}
                            {this.renderSquare(8)}
                        </div>
                    </div>
                );
        }

    });

    var Game = React.createClass({
        render: function() {
                return (
                    <div className="game">
                        <div className="game-board">
                            <Board />
                        </div>
                        <div className="game-info">
                            <div>{/* status */}</div>
                            <ol>{/* TODO */}</ol>
                        </div>
                    </div>
                );
        }
    })

    ReactDOM.render(
            <Game />,
            document.getElementById('container')
    );

在我的Square 组件中，我有respondToClick 方法，在我的方法内部：

this.setState({mark: newMark, clicks: nextClick});   

嗯，不知何故，标记和点击都不会更新。我可以使用回调，但在我的情况下，我看不出我该怎么做......有人可以帮忙吗？

Answer 1

问题是您存储的状态在层次结构中太低了。

现在你有它，当你点击一个空方块时，它会将点击计数增加到 1，然后将该方块的标记设置为 X。这永远不会改变，因为在这个函数中

respondToClick: function() {    
    if(this.state.mark == '_') {    
        var nextClick = this.state.clicks + 1;
        var newMark = nextClick%2 ? 'X' : 'O';                  
        this.setState({mark: newMark, clicks: nextClick});                                  
    }               
},  

当方块为“_”时，您只会更新一次状态，并且永远不会再更新一次。如果您删除该 if 语句，您将看到您的计数正确增加并且标记正确更改。

但是，解决您的整体问题的解决方案，即当您单击一个正方形时，它会变成 X，当您单击另一个正方形时，它会变成 O，这可以通过移动其轮到的状态来解决到 Board 组件的状态。