Как показать данные, извлеченные из API внутри карты массива React

Question

Я пытаюсь отобразить массив объектов внутри функционального компонента React. Вот часть моего объекта:

[{"id":1,"name":"Cordoba Park","start_date":"2020-03-19","address":null,"region":1,"country":2}] 

Моя проблема заключается в том, как сопоставить этот объект в таблицу и извлечь из API регион и страну по Id одновременно. Я использую перехватчики 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, но я предполагаю, что это невозможно ...

Если нет, то в действии с избыточностью вы должны запросить результаты отеля один за другим один и обновите магазин только один раз.

Вы можете взглянуть на библиотеку ax ios, чтобы сделать ваш звонок

Есть хорошая утилита Ax ios .all (), которая позволяет вам делать все вызовы API и ждать всех результатов перед вызовом функции обратного вызова. Топор ios Весь пример