如何在 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 全部示例