콜백 함수를 바인딩할 때 React의 \"this.setState는 함수가 아닙니다\" 오류를 해결하는 방법은 무엇입니까?

오류: React의 "this.setState는 함수가 아닙니다."

이 오류는 일반적으로 바인딩되지 않은 콜백 함수 내에서 this.setState에 액세스하려고 할 때 발생합니다. 올바른 맥락. React에서 이는 구성 요소 인스턴스를 참조하며 setState와 같은 메서드에 액세스하기 위한 적절한 컨텍스트를 유지하는 것이 중요합니다.

주어진 코드 조각에서 문제는 VK API 호출의 콜백 함수 내에서 발생합니다.

VK.api('users.get',{fields: 'photo_50'},function(data){
    if(data.response){
        this.setState({ //the error happens here
            FirstName: data.response[0].first_name
        });
        console.info(this.state.FirstName);
    }
});

콜백 함수가 다른 범위에 정의되어 있으며 이는 구성 요소 인스턴스를 참조하지 않습니다. 이 문제를 해결하려면 콜백 함수를 올바른 컨텍스트에 바인딩해야 합니다.

VK.api('users.get',{fields: 'photo_50'},function(data){
    if(data.response){
        this.setState({ //the error happens here
            FirstName: data.response[0].first_name
        });
        console.info(this.state.FirstName);
    }
}.bind(this));

콜백 함수를 여기에 바인딩하여 이것이 콜백 내의 구성 요소 인스턴스를 참조하는지 확인하고 다음을 수행할 수 있습니다. this.setState에 액세스합니다.

경우에 따라 시작 및 API 호출을 모두 바인딩해야 할 수도 있습니다.

VK.init(function(){
    console.info("API initialisation successful");
    VK.api('users.get',{fields: 'photo_50'},function(data){
        if(data.response){
            this.setState({ //the error happens here
                FirstName: data.response[0].first_name
            });
            console.info(this.state.FirstName);
        }

    }.bind(this));
}.bind(this), function(){
    console.info("API initialisation failed");

}, '5.34');

이렇게 하면 전체 프로세스에서 구성 요소 인스턴스를 참조하게 됩니다. , 시작 및 API 호출을 포함합니다.

위 내용은 콜백 함수를 바인딩할 때 React의 \"this.setState는 함수가 아닙니다\" 오류를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!