フェッチAPI呼び出し結果内で「this」キーワードを使用する方法

bugfix> javascript > 投稿

次のフェッチAPIを使用して、APIの結果を取得しています。結果データを状態に設定する必要がありますが、コールバック関数内で「this」オブジェクトを使用できません。 this にアクセスしてコードを更新し、状態の値を設定するにはどうすればよいですかキーワード？

fetch(config.apiUrl + '/api/user', {
  headers: authHeader(),
  method: 'GET',
})
  .then(function(res) {
    return res.json();
  })
  .then(function(data) {
    this.setState({ id: data.id });
  });

javascript

reactjs

react-redux

回答 2 件

  • this を割り当てる  まだ利用可能なコールバック外にある変数へのキーワード。しばしば var self = this;  使用されている。

    必要なコールバックで「self」を使用します。

  • 矢印機能を使用できます

    fetch(config.apiUrl + '/api/user', {
  headers: authHeader(),
  method: 'GET',
})
  .then(res => {
    return res.json();
  })
  .then(data => {
    this.setState({ id: data.id });
  });

    または、 this を割り当てることができます  変数へのキーワードとそのような使用 var that = this; 

    fetch(config.apiUrl + '/api/user', {
  headers: authHeader(),
  method: 'GET',
})
  .then(function(res) {
    return res.json();
  })
  .then(function(data) {
    that.setState({ id: data.id });
  });

あなたの答え

関連記事