以随机顺序反应地图渲染元素

Question

我做了一个 pokedex 网站，只是为了搞砸，我尝试将 12 个 pokemon 渲染到一个页面，直到用户单击下一页，然后它将根据 pokeapi 渲染下一个 12 个基础：“https://pokeapi. co/api/v2/pokemon?offset=0&limit=12"

  function getAllPokemon(url) {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {

        let allPromise = Promise.all(
          data.results.map((e) => {
            return new Promise((resolve, reject) => {
              resolve(e);
            });
          })
        );
        allPromise.then((e) => {
          e.map((res) => {
            fetch(res.url)
              .then((e) => e.json())
              .then((e) => {
                setListPokemon((listPokemon) => [
                  ...listPokemon,
                  {
                    id: e.id,
                    name: res.name,
                    url: res.url,
                    image_url:
                      e.sprites.other["official-artwork"].front_default,
                  },
                ]);
              });
          });
        });
      });
    setLoading(false);
  }

然后我会使用地图将所有数据呈现到屏幕上。

{listPokemon.map((p) => (
              <Grid>
                  <Card>
                    <CardMedia
                      component="img"
                      image={p.image_url}
                      alt={p.name}
                    />
                    <CardContent>
                      {p.id}.{setCap(p.name)}
                    </CardContent>
                  </Card>
              </Grid>
            ))}

我遇到的问题是有时 map 会以随机顺序渲染元素，大多数时候它仍然是升序。

据我所知，当我尝试在手机（比我的 PC 慢）上运行应用程序时，这种情况发生得更频繁。

这是因为滞后吗？

有没有办法确保我按照添加的顺序渲染元素？

Answer 1

请注意，您正在 for 循环内发出异步请求。在这种情况下，您应该做出一系列承诺并使用Promise.all()。结果将按特定顺序排列，如 here 所述，因此您只能使用排序的数据集合更新您的状态一次，然后呈现您的列表。