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

回答 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 });
      });
    
    

あなたの答え