ループ内ネイティブ非同期呼び出しを返す

Question

ループ内に次のコンポーネントがあり、いくつかの種類の場所の画像とともにスライダーでレンダリングされます。 PlaceExtraInfoコンポーネント（httpリクエスト）（合格placeId用）各場所についてのいくつかの追加の情報を取得し、適切な場所のスライドに表示すると仮定されています。私はReduxのを使用しています

return places.map((place, index) => 

    // there will be a fetch for each place id in the component 
    <PlaceExtraInfo placeId={place.id} key={index} /> 
); 

をしてPlaceExtraInfo componentWillMountに私はアクションをlocationIdのそれぞれに対してフェッチするよう呼びますが、すべてのスライドが最後のhttpリクエストの応答結果を表示するので、私は非同期のループトラップ（クロージャ）に悩まされています。

私は各反復のために何らかの種類のインデックスを渡すことを想定していますが、このフェッチ反復シナリオでそれを使用する方法を理解できません。

Answer 1

あなたは、このコンポーネント内でフェッチし、それを渡し、このような何かやってみてください：

const placesInfo = await Promise.all(places.map(place => 
    fetch(url) //pass whatever you need from place into fetch 
    .then((response) => <PlaceExtraInfo placeInfo={response} key={place.id} />) 
)) 
//so now you will be making the api call and passing the info down to your component 
//and this will return an array of all the components 

を