récupération des données d'API, je reçois de telles données: afin d'obtenir des informations plus détaillées, je dois récupérer chaque URL. J'essaie de le faire avec la promesse.Tous et mettez à jour l'état, mais le code ne fonctionne pas: Veuillez conseiller ce que je fais mal.
4 Réponses :
Promess.Tout Devrait avoir une matrice ou une promesse, l'argument devrait donc être une gamme de récupérations.
p>
Promise.all(this.state.names.map(name =>
fetch(name.url)))
.then(results => results.forEach(result => result.json())
.then(r => {
this.setState({
pokemons: [...this.state.pokemons, r]
})
})Merci de votre aide!)
Votre problème est que vous appelez à la fois LoadPokemons et LoadPokemonAdditionAlinfo dès que votre composant monte. Vous devez attendre jusqu'à ce que vous ayez récupéré le nom des pokemons, avant de chercher leurs informations supplémentaires.
this.loadpokemonadditionalinfo () doit être appelé à partir du rappel de State comme
Merci Ravi et Stephan! Vous avez raison et m'a beaucoup aidé! Ça fonctionne maintenant!
Premièrement, lorsque vous essayez de charger les données supplémentaires, les noms n'auront pas fini.
Faites simplement votre ComponentDidMount CODE> Fonction Async et attendez chaque appel (assurez-vous également que vous retournez. une promesse pour chacun). P> const results = [{ name:'John' }, { name:'Jane' }];
console.log('forEach', results.forEach(result => result.name));
console.log('map', results.map(result => result.name));
Merci beaucoup, mais cette opération avec Async-attendre n'aide pas. Y a-t-il d'autre manière comment le faire? En outre, pourquoi utiliser une carte au lieu de pourach?
La fonction foreach est uniquement itération de la matrice et ne renvoie rien. Vous avez besoin de la fonction Carte pour cartographier les résultats à une nouvelle gamme de noms.
Vous ne pouvez pas exécuter à la fois
loadPokemons(){
fetch('https://pokeapi.co/api/v2/pokemon-species')
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
names: json.results
}, () => {
this.loadPokemonAdditionalInfo()
})
})
}
loadPokemonAdditionalInfo() {
const { names } = this.state;
const promises = names.map(
name => fetch(name.url).then(response => response.json())
)
Promise.all(promises).then(results => {
this.setState({
pokemons: [...this.state.pokemons, ...results]
})
})
}
componentDidMount(){
this.loadPokemons();
}
Oui, ça marche maintenant! Wow! Merci beaucoup pour une explication et votre aide!