내 React 구성 요소에서 'setState'에 액세스할 수 없는 이유는 무엇입니까?

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