マッピング後の「未定義」の解決方法

Question

私はカスタムAPIを使用してデータを取得しています。フェッチする各データを含むオブジェクトがあるので、すべてが動的です。その時点で、fetch（）関数を使用してデータをフェッチする必要がありました。これで、コンポーネントがマウントされたときに要求されました（componentDidMount）。各Jsonデータを取得するためにオブジェクトを使用しているので、このオブジェクトをマップする必要があります。

componentDidMount(){ 
    CATEGORIES.map(function(category){ 
     this.fetchApiData(category.key); 
    }); 
} 

今、私はきちんと私のfetchApiData（）を定義しています。実際にはマッピングなしで動作しますが、オブジェクトをマップすると動作しません。

Answer 1

あなたはfetchApiDataプロパティへのアクセス権を持っていない別の関数の内部でthisにアクセスしようとしています。囲むコンテキストを使用するには、太い矢印ベースの関数を使用します。

componentDidMount(){ 
    CATEGORIES.map((category) => { 
     this.fetchApiData(category.key); 
    }); 
} 

Answer 2

このコンテキストはマップのコールバック関数内で変更されます。これを変数に代入し、マップのコールバック関数内で使用することができます。

componentDidMount(){ 
    var that = this; 
    CATEGORIES.map(function(category){ 
     that.fetchApiData(category.key); 
    }); 
}