componentDidMount中的setState不會改變狀態

Question

我知道有很多關於componentdidmount和setState insde的問題。但我不明白爲什麼我的console.log它時，我的this.state.context爲空？

這是我的組件的一個片段。我用畫布畫出一些數字。

var App = React.createClass({  
     getInitialState(){ 
      var board = []; 
      for(var i=0; i<30; i++){ 
       var temp=[]; 
       for(var j=0; j<50; j++){ 
       temp.push(0); 
       } 
       board.push(temp); 
      }  
      //glider pattern 
      board[0][2]=1; 
      board[1][0]=1; 
      board[1][1]=1; 
      board[2][1]=1; 
      board[2][2]=1;  

      return { 
       width: 550, 
       height: 350, 
       step: 0, 
       board: board, 
       isOn: true, 
       isPaused: false, 
       context: null 
      } 
     }, 

     componentDidMount(){   
      var canvas = document.getElementById("canvas"); 
      var ctx = canvas.getContext("2d");    
      //drawing text 
      ctx.fillStyle = "#777"; 
      ctx.font = "16px arial"; 
      ctx.fillText("Yonger", 25, 343); 
      ctx.fillText("Older", 120, 343); 
      ctx.fillText("Generation:", 25, 18); 
      ctx.fillStyle = "rgb(140, 198, 101)"; 
      ctx.fillRect (85, 333, 10, 10);     
      ctx.fillStyle = "rgb(30, 104, 35)"; 
      ctx.fillRect (100, 333, 10, 10);     



      this.setState({context:ctx});   
      console.log(this.state.context); 
      this.draw();  
     }, 

這時奇怪的事情：

  console.log(this.state.context); 

的console.log將打印空！但ctx實際上不是空！

Answer 1

setState操作已批處理，使它們異步。你可以提供一個函數作爲第二個參數，當setState完成並且你的組件已經被重新渲染時被調用。欲瞭解更多信息，請參見：https://facebook.github.io/react/docs/component-api.html

這應該工作：

this.setState({context:ctx},() => { 
    console.log(this.state.context); 
});