> 웹 프론트엔드 > JS 튜토리얼 > React 구성요소 함수에서 'this'가 정의되지 않은 이유는 무엇이며 어떻게 해결할 수 있나요?

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

Patricia Arquette
풀어 주다: 2024-12-11 00:31:10
원래의
596명이 탐색했습니다.

Why is

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

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

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

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

    1

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

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

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿