Javascript 组件中的设置状态DIDMOUNT不'；不改变状态

我知道有很多关于组件安装和设置状态的问题。但是我不明白为什么我的this.state.context在我console.log时为null

这是我的组件的一个片段。我用画布画了一些人物

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将打印为空！！！但是ctx实际上不是空的

setState

操作是批处理的，使它们异步。您可以提供一个函数作为第二个参数，该参数在

setState

完成且组件重新呈现时调用。有关详细信息，请参阅：

这应该起作用：

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

---

setState

操作是批处理的，因此它们是异步的。您可以提供一个函数作为第二个参数，该参数在

setState

完成且组件重新呈现时调用。有关详细信息，请参阅：

这应该起作用：

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

我在这里回答了我在这里回答了