0

这是我的第一个 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

4

2 回答 2

1

您的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;
  };
于 2020-10-08T10:20:46.007 回答
0

@JAM 提出的解决方案，但没有任何.then(). 省略了错误处理（可以使用catch()或try/except块）：

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

    // Wait for all subsequent fetches to finish
    return Promise.all(
        data.results.map(async item => {
            const res = await fetch(item.url);
            return res.json();
        }
    );
};
于 2020-10-08T12:01:10.817 回答