React map渲染元素的随机顺序

Question

我做了一个pokedex网站，只是为了搞砸，我试着渲染12个口袋妖怪到一个页面，直到用户点击下一页，然后它会渲染下一个12基于pokeapi: "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);
}

然后我将使用map将所有数据渲染到屏幕。

{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()。结果将按照一个特定的顺序，正如这里所解释的那样，因此您将只能使用排序的数据集合更新一次状态，然后呈现列表。