为什么我的列表只有两个项目，但它做了20次迭代-REACT

Question

迭代后，状态。口袋妖怪的大小是2，但计数打印在0到19之间

state = {pokemons:[],};
componentDidMount(){
let url = "https://pokeapi.co/api/v2/pokemon/";
fetch(url).then(res=>res.json())
.then(json=>{
console.log(json);
let cont = 0;
json.results.forEach(el => {
fetch(el.url)
.then(res=>res.json())
.then(json=>{
cont++;
// console.log(cont);
let pokemon = {id:json.id,name:json.name,avatar:json.sprites.front_default}
let pokemons = [...this.state.pokemons,pokemon];
this.setState({pokemons});
});
});
});
}

只显示视图中的两个项目

return (
<>
<h2> List size {this.state.pokemons.length}</h2>
{this.state.pokemons.map(el=><Pokemon key={el.id} name={el.name} avatar={el.avatar} />)}
</>
)

Answer 1

我解决了它改变了this.setState

this.setState((previus) => {
return {
pokemons: [...previus.pokemons, pokemon]
}
})