为什么 Axios For Loop 不允许我在 React 中操作数据？

Question

我正在使用 axios 构建一个 React 应用程序。我将此函数称为 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);

输出...

打开时....

数组似乎有数据，但当我尝试操作它时，chrome 将其声明为空。我已经阅读了具有类似问题的堆栈溢出响应，但我仍然无法修复它。

Answer 1

您正在对代码的 _.each 部分执行 await。这不会像您期望的那样工作。 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');
    }
}

它的工作方式是你的异步函数将 return 一个承诺结果，这将是 allNames 数组在这种情况下映射到的结果。然后可以将一系列承诺与 Promise.all 一起使用，然后您可以等待并获得所有承诺结果。

为什么 Axios For Loop 不允许我在 React 中操作数据？

Why wont Axios For Loop allow me to manipulate data in React?

google-chrome-devtools

lodash

reactjs

axios