"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 또는 프로파일 같은 다른 단수 당신의 바벨 구성), 당신은 너무 급 숙박 시설로 정의 할 수 있습니다 : 내가 도움이되기를 바랍니다

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

, 당신은 같은 일을 할 것입니다. 반응을 즐기십시오!