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

React 구성 요소 함수에서 정의되지 않은 "This" 처리

이 질문은 "this"가 다음의 구성 요소 함수 내에서 정의되지 않은 문제에서 비롯됩니다. React 컴포넌트입니다.

제공된 예제에서는 onToggleLoop 함수에서 문제가 발생합니다. 이 함수가 실행되면 컴포넌트에서 "this"가 정의되지 않습니다. 이는 React가 메소드를 컴포넌트에 자동으로 바인딩하지 않기 때문입니다.

이 문제를 해결하려면 생성자에서 바인딩(this) 함수를 사용하여 메소드를 수동으로 바인딩해야 합니다. 이를 수행하는 방법은 다음과 같습니다.

constructor(props) {
  super(props);

  this.state = {
    loopActive: false,
    shuffleActive: false,
  };

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

생성자에서 onToggleLoop 메소드를 바인딩하여 실행 시 "this"가 구성 요소 인스턴스를 참조하도록 보장합니다. 이를 통해 해당 함수 내에서 구성 요소의 상태와 소품에 액세스할 수 있습니다.

이렇게 변경하면 onToggleLoop 함수에서 "this" 개체가 더 이상 정의되지 않고 loopActive를 업데이트할 수 있습니다. 예상대로 상태입니다.

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