Блог

Поэтому я вызываю api и сохраняю результат в вызванном состоянии shift и получаю следующий результат:

 [
    {
        "id": 123,
        "status": "created",
        "expected": {
            "end_time": "2021-10-01",
            "start_time": "2021-10-01"
        },
    },
    {
        "id": 567,
        "status": "created",
        "expected": {
            "end_time": "2021-09-30",
            "start_time": "2021-09-30"
        },
    }
]
 

Теперь я отображаю это состояние сдвига следующим образом:

 {shift.map((item: any, key: any) => (
    <>
        <ShiftComponent
            Name={'name'}
            StartTime={item.expected.start_time}
            EndTime={item.expected.end_time}
            Address={'address'}
        />
    </>
))}
 

Чтобы получить это name , address мне нужно вызвать другой api, используя идентификатор из первого api, поэтому я извлек идентификаторы из первого api в массиве:

 id = ["123", "567"]
 

а затем вызов второго api и сохранение результата в value состоянии:

 for (let i = 0; i < id.length; i  ) {
    ApiCall.get(Url   'value/'   id[i])
        .then(async (resp) => {
            if (resp) {
                setValue(resp.data);
            } else {
                Alert.alert('Error', resp);
            }
        })
        .catch((err: any) => {
            console.log(err);
        });
}
 

результат второго api:

 {  
    "address": {
        "state": "anice state",
        "city": "nice city",
    },
    "name": "Nice name",
    "id": "123"
}
{  
    "address": {
        "state": "anice state 2",
        "city": "nice city 2",
    },
    "name": "Nice name 2",
    "id": "567"
}
 

Основываясь на результатах второго api, как я могу указать имя и адрес в своем ShiftComponent . Я попытался сопоставить уже сопоставленные shift , но это создает дубликаты и неправильные результаты.

P.S.: Я показал только 2 примера вывода в вызове моего api, на самом деле их гораздо больше

Пожалуйста, помогите, я не могу найти решение для этого.!!

Если вам действительно нужно вызывать свой API отдельно для каждого id , вы можете либо переместить этот вызов, ShiftComponent либо обернуть его другим компонентом, который позаботится о вызове. То, как вы это делаете сейчас, содержит недостаток:

 for (let i = 0; i < id.length; i  ) { // <-- this is a loop
    ApiCall.get(Url   'value/'   id[i])
        .then(async (resp) => {
            if (resp) {
                setValue(resp.data); // <-- this will overwrite state with every API response
            } else {
                Alert.alert('Error', resp);
            }
        })
        .catch((err: any) => {
            console.log(err);
        });
}
 

Вызов setValue в цикле, подобном этому, означает, что вы сохраняете только последний ответ от API. Опять же, самое простое решение этой проблемы-сделать один вызов API в каждом дочернем компоненте. Это может выглядеть примерно так:

 {shift.map((item: any, key: any) => (
    <ShiftComponent // make the API call inside this component
        id={item.id}
        StartTime={item.expected.start_time}
        EndTime={item.expected.end_time}
    />
))}