时间戳

首页 > 解决方案 > 循环获取和返回响应的问题

arrays - 循环获取和返回响应的问题

问题描述

这是我的第一个 stackoverflow 问题，所以对我温柔一点

我正在制作带有反应查询和获取的 pokedex 应用程序，但我在返回我的口袋妖怪数组时遇到问题。

我正在尝试获取一个 pokeApi，它返回一个由具有另一个 url 的对象组成的结果数组。然后我尝试映射槽结果数组并获取单个口袋妖怪的 url，然后将其推送到 arr 变量。最后，我返回的是不可读的 arr。

如何正确将数据推送到地图中的arr？

我做错了什么？有解决办法吗？


const fetchData = async (key) => {
    const data = await fetch(`https://pokeapi.co/api/v2/pokemon`)
      .then((res) => res.json())
      .then((data) => {
        return data;
      });
    const arr = [];
    data.results.map((item) => {
      return fetch(item.url)
        .then((res) => res.json())
        .then((data) => {
          arr.push(data);
        });
    });
    return arr;
  };

  const { isLoading, data } = useQuery("pokemons", fetchData, {
    refetchOnWindowFocus: false
  });

  if (isLoading) return <div>loading...</div>;
  console.log(data); // cant read
  return <div>Data loaded</div>;

https://codesandbox.io/s/strange-pond-wz4ws?fontsize=14&hidenavigation=1&theme=dark

标签： arraysreactjspromisefetchreact-query

解决方案

您的fetchData函数的问题在于，它不会等待每个item.

为了解决这个问题，您必须将每个结果映射为 a Promise，然后通过使用等待所有这些承诺完成Promise.all

您的fetchData函数可能如下所示：

  const fetchData = async (key) => {
    const data = await fetch(`https://pokeapi.co/api/v2/pokemon`)
      .then((res) => res.json())
      .then((data) => {
        return data;
      });

    // Wait for all subsequent fetches to finish
    const arr = await Promise.all(
      data.results.map((item) => fetch(item.url).then((res) => res.json()))
    );

    return arr;
  };

推荐阅读