如何在 React 数组映射中显示从 API 获取的数据

Question

我正在尝试在 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>

Answer 1

在渲染函数内部进行 API 调用不是一个好主意。每次更新任何道具时都会调用它，因此您将有太多的 api 调用和非常糟糕的性能。

你应该重新组织你的代码，先加载数据，然后再渲染结果

理想情况下，我会尝试在第一个 API 调用中从源获取数据，但我认为这是不可能的......

如果没有，则在 redux 操作中，您应该逐个查询酒店结果，并且只更新一次商店。

您可以查看 axios 库以进行调用

有一个不错的 Axios.all() 实用程序，可让您进行所有 API 调用并在调用回调函数之前等待所有结果。 Axios All example