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