"this" avaialableしかしthis.stateは利用できません

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 
    } 
} 

、あなたの中にプロファイルとしてステージ0または他のいくつかのステージ番号を持っている場合は、提案グレードのJavaScript（例えばを使用している場合バベル構成）、そしてあなたも、クラスのプロパティとして定義することができます。私は助けたことを願っています

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

：あなたはES6クラスを使用しない場合

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

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

は、あなたのような何かをするだろう。反応をお楽しみください！