잡히지 않은 TypeError: React에서 'setState' 속성에 액세스할 수 없습니다
React로 작업할 때 "Uncaught TypeError: Cannot" 오류가 발생할 수 있습니다. 정의되지 않은 'setState' 속성을 읽어보세요." 이 문제는 제대로 바인딩되지 않은 구성 요소의 'setState' 메서드에 액세스하려고 할 때 발생합니다.
'setState' 메서드는 React 구성 요소의 상태를 업데이트하는 데 사용됩니다. 구성 요소를 정의할 때 'this'가 올바른 범위를 참조하는지 확인하기 위해 해당 메서드를 구성 요소 인스턴스에 바인딩해야 합니다. 이 오류는 구성 요소 메서드가 명시적으로 바인딩되지 않고 생성자 외부에서 호출될 때 자주 발생합니다.
예:
다음 코드 조각을 고려하세요.
<code class="javascript">class Counter extends React.Component { constructor(props) { super(props); this.state = { count : 1 }; this.delta.bind(this); // Binding delta incorrectly } delta() { this.setState({ count : this.state.count++ }); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={this.delta}>+</button> </div> ); } }</code>
이 예에서 '델타' 메소드는 생성자의 구성요소에 바인딩되지 않습니다. 결과적으로 'delta'를 호출하면 'this'는 해당 컴포넌트 인스턴스를 참조하지 않고, 'undefine'에서는 'setState'에 접근할 수 없기 때문에 오류가 발생합니다.
해결책:
이 문제를 해결하려면 생성자의 구성 요소에 'delta' 메서드를 올바르게 바인딩해야 합니다.
<code class="javascript">constructor(props) { super(props); this.state = { count : 1 }; this.delta = this.delta.bind(this); // Correctly binding delta }</code>
'this.delta = this.delta'로 설정 .bind(this)', 바인딩된 함수를 'this.delta'에 할당합니다. 이렇게 하면 'delta'가 호출될 때 'this'가 구성 요소 인스턴스를 참조하여 'setState' 메소드에 대한 액세스를 허용하게 됩니다.
위 내용은 내 React 구성 요소에서 'setState'에 액세스할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!