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

2024-05-15 • 问答

我正在使用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将其声明为空。我已经阅读了有类似问题的堆栈溢出响应，但仍然无法修复。

您正在代码的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');
    }
}

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

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

chengyi275 回答：为什么Axios For Loop不能让我在React中操作数据？

大家都在问