Je dois récupérer 2 API du backend et essayer d'obtenir le résultat de ces deux. Mais, pour le moment, le Résultat JSON que je reçois de la première API est une matrice d'objet à Json. J'ai besoin de passer l'identifiant de la première API (à l'aide de la SSTATE) vers une deuxième API pour les variables de chemin. Mais quand je fais de mon chemin, cela ne récupère pas les données. Considérez le code ci-dessous:
componentDidMount(){
// console.log(loginEmail)
fetch(`http://localhost:9000/api/item/list`,)
.then((resp)=>{
resp.json().then((res)=>{
console.log(res.data);
// localStorage.setItem('id', res.data.user_info.id);
this.setState({data: res.data});
}
)
})
const id = this.state.data.id;
fetch(`http://localhost:9000/api/item/photo/view/${id}`,)
.then((resp)=>{
resp.json().then((res)=>{
console.log(res);
// localStorage.setItem('id', res.data.user_info.id);
this.setState({res});}
)
})
}
3 Réponses :
Le problème est que Fetch renvoie un Vous n'avez pas encore de données peuplées. vous avoir à concaténer les deux demandes d'une manière comme suit: prometteur donc, à la ligne
Fetch est asynchrone, ce qui signifie JavaScript récupérer des données sur le premier appel sans attente et continuer au deuxième appel de récupération où l'identifiant n'est pas défini ou NULL.
Pour résoudre ce problème, vous pouvez utiliser des promesses comme suit P>
mon exemple de code P>
fetchData(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then((resp) => {
resp.json().then((res) => {
console.log(res.data);
// localStorage.setItem('id', res.data.user_info.id);
resolve(res.data);
}
)
})
})
}
async componentDidMount() {
// console.log(loginEmail)
let data = await this.fetchData("http://localhost:9000/api/item/list");
let id = data.id;
let newData = await this.fetchData(`http://localhost:9000/api/item/photo/view/${id}`);
this.setState({ res: newData });
}
Vous devez vous assurer que chaque identifiant obtient ses résultats pertinents.