Question

我在循环中有一个跟随的Component，可以在某种带有一些位置图像的滑块中渲染。 PlaceExtraInfo组件是获取（http请求）关于每个地方的一些额外信息（对于传递的placeId）并且假设将其显示在适当的位置幻灯片上：

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

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

我正在使用Redux并且在PlaceExtraInfo componentWillMount中我调用Action来为每个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

在循环内部反应Native异步调用

1 个答案: