我正在嘗試顯示一個包含 151 個口袋妖怪的陣列，按它們的 pokedex 位置排序（例如：1 - bulbasaur，2- ivysaur ...），但每次我重新加載頁面時，它都會給我帶來一個不同的陣列，位置被打亂了。
應用程式.js：
import './App.css';
import { useEffect, useState } from 'react';
import Pokemon from './components/Pokemon';
const App = () => {
const [pokemonData, setPokemonData] = useState([]);
const fetchPokemons = () => {
for (let index = 1; index < 152; index = 1) {
new Array(151).fill(
fetch(`https://pokeapi.co/api/v2/pokemon/${index}`)
.then((data) => data.json())
.then((result) =>
setPokemonData((prevState) => [...prevState, result])
)
);
}
};
useEffect(() => {
fetchPokemons();
}, []);
return (
<>
{pokemonData && <Pokemon data={pokemonData} />}
</>
);
};
export default App;
口袋妖怪.js：
const Pokemon = ({ data }) => {
return (
<section>
{data.map((pokemon) => (
<div key={pokemon.name}>
<img src={pokemon.sprites.front_default} alt={pokemon.name} />
<span>{pokemon.name}</span>
<span>
{pokemon.types.length >= 2
? `${pokemon.types[0].type.name} ${pokemon.types[1].type.name}`
: pokemon.types[0].type.name}
</span>
</div>
))}
</section>
);
};
export default Pokemon;
uj5u.com熱心網友回復：
如果你想保證訂單，你需要類似的東西
const fetchPokemons = async () => {
const promises = [];
for (let index = 1; index < 152; index = 1) {
promises.push(fetch(`https://pokeapi.co/api/v2/pokemon/${index}`).then((data) => data.json()));
}
const results = await Promise.all(promises);
setPokemonData(results);
};
這將需要一段時間，因為它會在顯示任何一個之前加載所有的神奇寶貝 - 如果你不想要這樣，那么真的有兩個選擇：重做事情以按順序執行每個請求，或者交替切換到一個陣列，其中一些插槽可能在null仍在加載內容時（這也需要更改您的渲染代碼）。
uj5u.com熱心網友回復：
您正在對 api 進行 153 次呼叫，這不是很好我強烈建議您更改為單個 api 呼叫以獲取所有口袋妖怪，要實作這一點，您可以這樣做：
const [pokemonData, setPokemonData] = useState<any>([]);
const fetchPokemons = async () => {
const data = await fetch(`https://pokeapi.co/api/v2/pokemon?offset=0&limit=153"`);
const pokemons = await data.json();
setPokemonData(pokemons.results);
};
useEffect(() => {
(async () => {
await fetchPokemons();
})();
}, []);
這也將保證您始終以相同的方式獲取資料。您不會面臨任何競爭條件，也不會有任何不必要的 api 呼叫。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/450512.html
標籤：反应
上一篇：導航給了我空白頁
下一篇：CSS輸入框樣式不會立即應用