Question

当前，我正在尝试将获取的API数据从子组件移到父组件。因此，我想进行某种映射以一次执行多次提取并将数据保存到数组中，但是我对异步JS真的很陌生，而且我正为此而苦苦挣扎。我的函数现在看起来像这样：

useEffect(() => {
    (async () => {
      const result = await newArray.map((item, index) =>
        axios.get(`http://pokeapi.co/api/v2/pokemon/${index + 1}`)
      );
      setDataNew(result);
      console.log(dataNew);
    })();
  }, []);

newArray只是一个创建的数组，可以映射所有151个宠物小精灵。预先谢谢你。

Answer 1

首先，不需要嵌套的立即调用函数，只需要吞下返回值即可。

第二，您正在等待一个诺言数组，但该数组不是一个诺言。您应该在一个Promise.all调用中包装诺言数组，以便等待数组中的每个单独的诺言。

useEffect(async () => {
      const result = await Promise.all(newArray.map((item, index) =>
        axios.get(`http://pokeapi.co/api/v2/pokemon/${index + 1}`)
      )); // result will be an array of values (not promises)
      setDataNew(result);
      console.log(dataNew);
  }, []);

Answer 2

好吧，我尝试了一些方法来使这项工作成功，但没有运气。目前，我的代码如下：

  const [dataNew, setDataNew] = useState([]);
  useEffect(() => {
    async function fetchData() {
      const result = await Promise.all(
        newArray.map((item, index) =>
          axios.get(`http://pokeapi.co/api/v2/pokemon/${index + 1}`)
        )
      );
      setDataNew(result);
      console.log(result);
    }
    fetchData();
  }, []);

console.logging结果为我提供了151个未定义的数组。我该如何运作？ @junvar

使用.map函数获取数据数组

2 个答案: