コールバック関数をバインドするときの React の「this.setState は関数ではありません」エラーを解決する方法-jsチュートリアル-php.cn

コールバック関数をバインドするときの React の「this.setState は関数ではありません」エラーを解決する方法

Mary-Kate Olsen

リリース： 2024-10-24 05:03:30

オリジナル

996 人が閲覧しました

How to Resolve

エラー: 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 サイトの他の関連記事を参照してください。