React js this.setStateが正常に動作していません

Question

私はリアクションを学び、チック・タック・トゥ・ゲームを構築しています。 私のコードは以下の通りです：私のSquareコンポーネントで

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

私はrespondToClick方法を持っていると私が持っているメソッド内：

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

まあ、何とかどちらのマークもクリックが更新されます。私はコールバックを使うことができましたが、私の場合、私はどのようにそれを行うことができません...だれでも助けてくれますか？

Answer 1

問題は、あなたの状態が階層内で低すぎるということです。今あなたがそのようなあなたが空の角をクリックしたとき、それは1に、クリックカウントをインクリメントして、これは、この機能であるため

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

を変更することはありませんXにその四角のマークを設定することを持っている

あなたは四角形が '_'のときのみ状態を一度更新し、もう一度それを更新しません。そのifステートメントを削除すると、カウントが正しく増分され、マークが正しく変化することがわかります。

しかし、ターンが変わっていないという全体的な問題を解決するには、正方形をクリックするとXに変わり、別のものをクリックするとOに変わります。ボードコンポーネントの状態まで