React:获取多个获取请求时出现问题
Id；number；sprite；Map<：string；Pokemon>；Map<，Pokemon>：axios.get(‘https；{；<提问开始:
所以我正在使用的API没有一个来源来获取所有的精灵宝可梦，但它有链接到每个来源，并将它们的id作为参数。我使用for循环来获取所有请求。我使用async await同步地做了这件事，但它真的很慢。
代码不起作用了。它正在获取请求，但它没有正确地更新地图。它只会在收到请求之前记录当前的地图。
import React from 'react'
import axios from 'axios'
//Defines what a Pokemon has
interface Pokemon {
name: string,
id: number,
sprite: string
}
const PokemonList2: React.FC<{}> = (props) => {
//The state is a Map of pokemon. Key is the Pokemon's name, value is a Pokemon object
const [pokemonMap, setPokemonMap] = React.useState<Map<string, Pokemon>>(new Map<string, Pokemon>())
//Handles API request
React.useEffect(() => {
//Sets the temporary map equal to the state's map
let tempPokemonMap: Map<string, Pokemon> = pokemonMap
//loops through pokemon
for (let i = 1; i <= 50; i++){
//says it's loading
console.log('loading...')
//gets the request
axios.get('https://pokeapi.co/api/v2/pokemon/' + i)
.then(res => {
//adds the new pokemon to the map
tempPokemonMap.set(res.data.name, {
name: res.data.name,
id: res.data.id,
sprite: res.data.sprites.front_default
})
//Sets the state map to the temp map
setPokemonMap(tempPokemonMap)
//logs that is was added
console.log(`Added ${ res.data.id } : ${ res.data.name }`)
})
}
}, [setPokemonMap, pokemonMap])
//logs the current map
console.log(pokemonMap)
//Gets JSX from the map
let pokemonJSX: JSX.Element[] = []
pokemonMap.forEach(pok => {
pokemonJSX.push(
<div key={ pok.id } style={{ textAlign: "center" }}>
<p>{ pok.name }</p>
<img src={ pok.sprite } alt={ pok.name }/>
</div>
)
})
//Prints the JSX
return (
<div className="container">
{ pokemonJSX }
</div>
)
}
export default PokemonList2在这种情况下，您的问题是，当您将tempPokemonMap赋值为pokemonMap时，您实际上并没有将pokemonMap的值复制到您的变量上，而只是传递了引用。当您稍后尝试更新状态时，您将传递对已处于状态的对象的相同引用，这就是为什么React没有检测到任何更改，以及它不会重新呈现的原因。
此外，正如d3bgger提到的，我还建议您完成所有请求，然后更新状态。在性能和用户体验方面都是如此。
总结以上是真正的电脑专家为你收集整理的React:获取多个获取请求时出现问题的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得真正的电脑专家网站内容还不错，欢迎将真正的电脑专家推荐给好友。
你可能想看：