如何在React数组映射中显示从API获取的数据
如何在React数组映射中显示从API获取的数据
提问于 2020-03-20 21:39:16
我正在尝试映射React功能组件中的对象数组。这是我的对象的一部分：
[{"id":1,"name":"Cordoba Park","start_date":"2020-03-19","address":null,"region":1,"country":2}] 我的问题是如何将这个对象映射到一个表中，并同时通过Id从API中获取地区和国家。我正在使用Redux钩子从我的API获取数据。
<tbody>
{
hotels.payload.map((hotel) => (
<tr key={hotel.id}>
<td>
<div className="d-flex flex-column">
<h5>{hotel.name}</h5>
<p className="text-muted">{hotel.chain}</p>
</div>
</td>
<td>{hotel.country}</td>
<td>{hotel.region}</td>
<td>
<Badge className="p-2" variant={hotel.active ? 'success' : 'danger'}>
{hotel.active ? 'Activo' : 'Inactivo'}
</Badge>
</td>
<td>
<Button className="mx-1" variant="light">
<i className="fas fa-edit" />
</Button>
<Button className="mx-1" variant="light">
<i className="fas fa-trash" />
</Button>
</td>
</tr>
));
}
</tbody>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-21 01:37:34
在渲染函数内部进行API调用并不是一个好主意。每次更新任何属性时都会调用它，因此你会有太多的api调用和非常糟糕的性能。
您应该重新组织代码，以便先加载数据，然后呈现结果
理想情况下，我会尝试在第一个API调用中从源获取数据，但我假设这是不可能的……
如果不是，在redux操作中，您应该一个接一个地查询酒店结果，并且只更新商店一次。
您可以查看axios库来进行调用。
有一个很好的Axios.all()实用程序，它允许您进行所有的API调用，并在调用回调函数之前等待所有结果。Axios All example
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60775331
复制相关文章
相似问题
腾讯云开发者
