コールバック関数をバインドするときの 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 にバインドすることで、これがコールバック内のコンポーネント インスタンスを参照するようになり、次のことが可能になります。 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 中国語 Web サイトの他の関連記事を参照してください。