在同一张卡片中重新呈现列表项而不是一张卡片列表。
我正在做一个简单的pokedex，它应该列出所有第1代pokemon，并从https://pokeapi.co/检索数据
当我到达屏幕时，虽然我可以看到我打印时拥有所有的pokemon，但是列表开始循环并重新复制同一张卡片，而不是更新卡片列表和添加卡片，而不是替换已经存在的卡片。
我认为我的问题是理解反应渲染循环。谁能给我指出正确的方向吗？
下面是我有一个从api获取单个pokemon的方法的页面，这是到我的github https://github.com/vradu007/poke-frontend的链接。
谢谢!
const MainPage = (props) => {
const [pokemons, setPokemons] = useState([]);
const getPokemon = async (pokemonId) => {
let pokemon = {};
try {
// const apiUrl = `https://pokeapi.co/api/v2/pokemon/${pokemon}`;
// const res = await axios.get(apiUrl);
// pokemons.push(res.data);
pokemon = fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`)
.then((response) => response.json())
.then((response) => setPokemons([...pokemons, response]))
.then(() => {console.log(pokemons)});
} catch (error) {
console.log(error);
}
};
useEffect(() => {
for( let i = 0; i<151; i++){
getPokemon(i);
}
},[]);
return (
<React.Fragment>
<Header title="Pokemon Page" />
<PokemonList pokemons={pokemons} />
</React.Fragment>
);
};回答 2
Stack Overflow用户
发布于 2021-02-12 12:30:40
这是因为您的setState是异步的，状态更新依赖于以前的状态，因此需要对setPokemons函数进行回调。这个解决方案不是很好，因为您更新状态的次数太多了。另一个用户已经发布了更好的方法，即当您的所有承诺都得到解决时，只发布setState。
pokemon = fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`)
.then((response) => response.json())
.then((response) => setPokemons(pokemons => [...pokemons, response]))
.then(() => {console.log(pokemons)});Stack Overflow用户
发布于 2021-02-12 12:21:22
编辑--它可以用React (vanshaj发布的方式)来完成，但下面是另一种执行方式:-
const MainPage = (props) => {
const [pokemons, setPokemons] = useState([]);
const getPokemon = async (pokemonId) => {
try {
const apiUrl = `https://pokeapi.co/api/v2/pokemon/${pokemonId}`;
const res = await axios.get(apiUrl).then(res=>res.json());
return res;
} catch (error) {
console.log(error);
}
};
useEffect(() => {
async function gottaCatchEmAll(){
const promises = [];
for( let i = 0; i<151; i++){
promises.push(getPokemon(i));
}
const pokemons = await Promise.all(promises);
setPokemons(pokemons);
}
gottaCatchEmAll();
},[]);
return (
<React.Fragment>
<Header title="Pokemon Page" />
<PokemonList pokemons={pokemons} />
</React.Fragment>
);
};在您的实现中，您试图独立地在所有承诺中设置状态。您需要确保的是，所有这些承诺都像前面那样以异步方式得到解决，但它们被分组在一起，以便当所有这些承诺得到解决时，可以返回一个集体输出，该输出可以在一次传递中设置为状态。这种分组机制是Promise.all。
https://stackoverflow.com/questions/66171653
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号