Почему Axios For Loop позволяет мне манипулировать данными в React? - PullRequest
Новая
       104

Почему Axios For Loop позволяет мне манипулировать данными в React?

0 голосов
/ 04 ноября 2019

Я создаю приложение реагирования, используя axios. Я назвал эту функцию useNames (allNames), которая передает массив имен, которые будут повторяться Axios. На первый взгляд кажется, что он работает, но когда я console.log, данные выглядят примерно так ...

функция запускается ..... 

useNames =  async (allNames) => {

        try {

            const promisesArray = [];
           await _.each((allNames), async (value) => {
                const res= await axios.get(`https://pokeapi.co/api/v2/pokemon/${value}`);
                promisesArray.push(res.data);

            });

            console.log(promisesArray);


        } catch (err) {
            throw new Error('Unable to insert API data');
        }

    }

useNames(allNames);

output...

enter image description here

при открытии ....

enter image description here

Массив содержит данные, но когда я пытаюсь ими манипулировать, chrome объявляет их пустыми. Я прочитал ответы переполнения стека, у которых есть похожие проблемы, но я все еще не могу это исправить.

1 Ответ

4 голосов
/ 04 ноября 2019

Вы делаете await в части _.each кода. Это не будет работать так, как вы ожидаете. await будет ожидать завершения асинхронной операции, прежде чем она продолжится, однако _.each не является асинхронной операцией, даже если используемый обратный вызов сам по себе является асинхронным. То, что вы хотите сделать, это дождаться фактических обещаний: 

useNames =  async (allNames) => {

   try {
      const promisesArray = _.map(allNames, async (value) => {
          const res= await axios.get(`https://pokeapi.co/api/v2/pokemon/${value}`);
          return res.data;
      });
      const valuesArray = await Promise.all(promisesArray);
      console.log(valuesArray); // Should have resolved values
    } catch (err) {
        throw new Error('Unable to insert API data');
    }
}

Способ, которым это работает, заключается в том, что ваша асинхронная функция будет возвращать результат обещания, который будет таким, в который массив allNames получает карту в этом случае. Затем можно использовать массив обещаний с Promise.all, который можно ожидать и получить все результаты обещаний.

...