내 React 구성 요소 함수 내에서 'this'가 정의되지 않은 이유는 무엇이며 어떻게 수정합니까?

반응: "this"는 구성 요소 함수 내부에서 정의되지 않았습니다.

문제:

In React 구성 요소인 경우 메서드 내에서 "this"에 액세스하려고 하면 "정의되지 않은" 오류가 발생합니다. 구성 요소에는 메서드 내에서 액세스할 수 있는 상태 개체가 있습니다. 개발자는 "this"가 구성 요소 인스턴스를 참조할 것으로 예상하지만 정의되지 않은 상태로 유지됩니다.

해결 방법:

ES6 React.Component는 메서드를 자동으로 바인딩하지 않습니다. 구성 요소 자체. 이 문제를 해결하려면 생성자 내에서 메서드를 수동으로 바인딩해야 합니다.

constructor (props) {
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

메서드를 바인딩하면 "this"가 구성 요소 인스턴스를 올바르게 참조하여 상태 및 기타 속성에 액세스할 수 있습니다. 이렇게 하면 구성 요소별 데이터에 액세스하려는 메서드에 "this"가 정의됩니다.

위 내용은 내 React 구성 요소 함수 내에서 'this'가 정의되지 않은 이유는 무엇이며 어떻게 수정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!