Question

我正在学习React并构建一个tic-tac-toe游戏。我的代码如下：

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

只有当广场是＆＃39; _＆＃39;永远不会再来如果删除if语句，您将看到计数正确递增并且标记正确更改。

然而，你没有转弯的整体问题的解决方案，所以当你点击一个正方形变成X时，当你点击另一个它转向O可以通过只是移动它的转动状态来解决到董事会成员的状态。

React js this.setState无法正常工作

1 个答案: