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

Question

我正在使用 axios 构建一个反应应用程序。我称这个函数为 useNames(allNames)，它传入一个名称数组，将由 Axios 迭代。乍一看，它似乎可以工作，但是当我控制台记录数据时，它看起来像这样......

函数正在运行.....

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');
    }
}

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