「this」avaialable but「this.state」not available

Question

componentDidMount : function() 
{ 
    console.log(this);//1 
    console.log(this.state);//2 
} 

第1行顯示所有細節，不包括所有狀態變量，但第2行給出空對象。爲什麼？我如何訪問狀態變量或其他功能？

Answer 1

這是預期的，因爲狀態需要在使用之前定義。與ES6類的常用方法是從構造函數中定義的初始狀態下，例如：

class MyCmp extends React.Component { 
    constructor() { 
     super(); // don't forget to call superclass constructor 
     this.state = {foo: 1}; 
    } 

    componentDidMount() { 
     console.log(this);//1 
     console.log(this.state);//2 
    } 
} 

如果使用建議等級的JavaScript（例如，如果你有0級或一些其他級數如在個人資料中巴貝爾配置），那麼你可以將它定義爲一個類屬性太：

class MyCmp extends React.Component { 
    state = { 
     foo: 1 
    }; 

    componentDidMount : function() { 
     console.log(this);//1 
     console.log(this.state);//2 
    } 
} 

如果你不使用ES6類，你會做這樣的事情：

var MyCmp = React.createClass({ 
    getInitialState: function() { 
     return { 
      foo: 1 
     } 
    }, 
    componentDidMount : function() { 
     console.log(this);//1 
     console.log(this.state);//2 
    } 
} 

我希望幫助。享受反應！