时间戳

首页 > 解决方案 > 以随机顺序反应地图渲染元素

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

问题描述

我做了一个 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 慢）时，这种情况发生得更频繁。

这是因为滞后而发生的吗？

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

标签： javascriptreactjsapi

解决方案

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

推荐阅读