React 구성요소 함수에서 'this'가 정의되지 않은 이유는 무엇이며 어떻게 해결할 수 있나요?

React 컴포넌트 함수의 "this" 이해하기

React로 작업할 때 "this는 컴포넌트 함수 내에서 정의되지 않았습니다."라는 오류가 발생할 수 있습니다. 이는 구성 요소 함수 내에서 this 개체에 액세스하려고 시도하고 정의되지 않은 경우 발생합니다.

ES6 React.Component에서 메서드는 구성 요소 자체에 자동으로 바인딩되지 않습니다. 대신 생성자에서 명시적으로 바인딩해야 합니다. 예제에 언급된 문제를 해결하려면 다음 단계를 사용할 수 있습니다.

1. 생성자에서 메서드 바인딩:
   생성자에서 onToggleLoop를 바인딩하는 다음 줄 방법:

   this.onToggleLoop = this.onToggleLoop.bind(this);

2. 구성 요소 업데이트:
   다음과 같이 수정된 생성자로 구성 요소를 업데이트합니다.

   class PlayerControls extends React.Component {
     constructor(props) {
       super(props)
   
       this.state = {
         loopActive: false,
         shuffleActive: false,
       }
   
       this.onToggleLoop = this.onToggleLoop.bind(this);
     }
   
     // ... rest of the code
   }

생성자에서 onToggleLoop 메소드를 바인딩하여 이것이 올바른 것을 참조하는지 확인합니다. 메서드가 호출될 때 구성 요소 인스턴스입니다. 이를 통해 loopActive 상태를 성공적으로 업데이트하고 상위 구성 요소가 전달한 onToggleLoop prop을 실행할 수 있습니다.

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