React の `this.setState` 関数が ComponentDidMount コールバックで使用できないのはなぜですか?

「React this.setState は関数ではありません」 問題: コンテキスト バインディング

サードパーティ API を利用してアプリケーションを開発しようとする場合で発生する一般的なエラーは、「TypeError: this.setState は関数ではありません。」です。これは、API 応答を処理しようとすると発生します。この問題は通常、不適切なバインディングが原因で発生します。

提供された React コードは、componentDidMount メソッドを使用して AppMain というコンポーネントを定義します。このメソッドでは、VK API 呼び出しを実行してユーザー情報を取得します。 API 応答のコールバック関数内で、this.setState を使用してコンポーネントの状態を更新しようとします。ただし、コールバック関数が別のコンテキストで実行され、this.setState にアクセスできないためにエラーが発生します。

解決策:

この問題を解決するには、次のようにします。コールバック関数は正しいコンテキストにバインドされている必要があります。これは、.bind メソッドを使用して実現できます。

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.

追加バインディング:

場合によっては、追加のバインディングが必要になる場合があります。たとえば、VK init メソッドがComponentDidMount 内でも呼び出される場合、そのメソッドもコンポーネント インスタンスにバインドする必要があります:

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');

以上がReact の `this.setState` 関数が ComponentDidMount コールバックで使用できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。