我制作了一個 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);
}
然后我會使用 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 慢）上運行該應用程式時，這種情況發生得更頻繁。
這是因為滯后而發生的嗎？
有沒有辦法確保我按照添加的順序呈現元素？
uj5u.com熱心網友回復：
請注意，您正在for回圈內發出異步請求。在這種情況下，您應該制作一系列承諾并使用Promise.all()。其結果將是在一個特定的順序，說明在這里，所以你將能夠與資料的排序收集一次更新您的狀態，然后使您的串列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/341590.html
標籤：javascript 反应 接口
上一篇：SwiftJSON解碼url