Отображение результата работы асинхронной функции в React

Question

await axios.post('/data-base', {...my-search-parameters}, {
    headers: {
        'Content-Type': 'application/json'
    }
}).then(async res => {
    await res.data[0].items.map(async v => {
        await axios.post('/api',{id:v.id}, {
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(res => {
            result.push({...v, info: res.data})
        })
    })
})

Сначала я делаю запрос в базу данных. Получаю от туда список необходимых мне id. Затем через цикл map делаю запрос на api с каждым полученным ранее id. Как мне отобразить полученный массив results в React?

Answer 1

Что-то вы намудрили с промисами. Зачем then, если есть await. На реакте не пишу, но по сути он тут и не при чем. Попробуйте под свой код адаптировать что-то навроде этого:

async function someAsyncFn() {
    const headers = { 'Content-Type': 'application/json' };
    const res = await axios.post('/data-base', { '...my-search-parameters': '' }, { headers });

    const result = [];
    for (let i = 0; i < res.data[0].items.length; i++) {
        const v = res.data[0].items[i];
        const child = await axios.post('/api', { id: v.id }, { headers });

        result.push({ ...v, info: child.data });
    }
    console.log('target: result', result);
}

БЛОГ НА HUSL

Отображение результата работы асинхронной функции в React

Ответы (1 шт):