Question

我知道有很多关于componentdidmount和setState insde的问题。但我无法理解为什么我的this.state.context在我console.log时为空？

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

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

Answer 1

setState个动作被批处理，使它们异步。您可以提供一个函数作为第二个参数，在setState完成并且您的组件已重新渲染时调用该参数。有关详细信息，请参阅：https://facebook.github.io/react/docs/component-api.html

这应该有效：

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

componentDidMount中的setState不会更改状态

1 个答案: