Je me suis cogné la tête contre ce problème et j'ai besoin d'aide pour trouver une solution. J'ai un tableau d'identifiants dans un JSON, et je suis en train d'itérer sur ce tableau et de faire une demande GET de chaque identifiant. Je veux ensuite pousser la réponse de ces requêtes GET dans un tableau.
Voici la fonction que j'utilise pour pousser les enregistrements dans le tableau. Il itère à travers un tableau d'identifiants:
render() {
let event = this.getEvent();
let registrations2 = [{
age: 19,
bio: 'test',
firstName: 'hello',
lastName: 'bye',
password: 'adadas',
telephone: "4920210213"
}];
if (this.props.listOfEvents.events.length !== 0 && !this.props.listOfEvents.gettingList && event) { //check if the array is empty and list has not been rendered yet
let columns = [];
let registrations = this.getRegistrations(event);
console.log(registrations);
let eventProperties = event.properties[0];
Object.keys(eventProperties).forEach(key => columns.push({
title: eventProperties[key].title,
dataIndex: key,
key: key
}));
console.log(registrations);
console.log(registrations2);
return (
<h1>hi</h1>
)
}
return <Loading/>
}
Voici où j'appelle ce code:
getRegistrations = async (event) => {
let registrations = [];
await event.registrations.forEach(registration => axios.get('/event/getRegistration', {
params: {
id: registration
}
}).then(res => {
registrations.push(res.data.properties)
}
).catch(err => console.log(err)));
return registrations;
};
Quand je console-log 'registrations' vs 'registrations2' ils devraient être très identiques. Cependant, dans la console javascript de Google Chrome, "inscriptions apparaît comme" [] "où" inscriptions2 "apparaît comme" [{...}] ".
Je sais qu'il s'agit d'un problème lié à promesses (je retourne le tableau des inscriptions avant de pousser réellement) mais je n'ai aucune idée de comment y remédier! Une aide amicale serait très appréciée!
3 Réponses :
Vous devez utiliser la méthode du cycle de vie componentDidMount () pour une exécution correcte et un état pour stocker les données.
constructor (props) {
super(props);
this.state = {registrations :[]}
}
componentDidMount () {
let response = this.getRegistrations()
this.setState({registrations : response});
}
Accédez ensuite à cet état dans la méthode de rendu. Ce n'est pas une bonne pratique d'appeler une API à partir de render mothod.
Puisque getRegistrations (event) renvoie une promesse, vous devez effectuer des opérations sur sa valeur de retour dans puis .
Au lieu de
this.getRegistrations(event).then(registrations => {
console.log(registrations);
// other operations on registrations
});
Faites ceci
let registrations = this.getRegistrations(event); console.log(registrations);
GetRegistrations renvoie-t-il une promesse? Ne serait-ce pas techniquement retourner le tableau? De plus, quand j'essaye de faire quelque chose comme console.log (registrations [0]) , il enregistre undefined . Pourtant, console.log (inscriptions) semble que le tableau est parfaitement valide dans la console Javascript?
La fonction async renvoie une promesse. developer.mozilla.org/en-US/docs/ Web / JavaScript / Référence /…
Je recommande Promise.all , il résoudra une seule promesse une fois toutes les promesses résolues. Et techniquement, la fonction asynchrone est également prometteuse, elle sera donc prometteuse.
voici l'exemple.
C'est la première chose qui fonctionne réellement! Comment puis-je accéder aux données en dehors de console.log (data) ? Je dois pouvoir utiliser ces enregistrements pour afficher leurs données dans un tableau.
êtes-vous familier avec l'état de réaction. vous pouvez utiliser l'état dans cette situation
J'ai fait ça, et ça a marché! Cependant, je devrais éviter d'appeler setState dans render, correct? Serait-il préférable de refactoriser ce code pour qu'il soit appelé dans componentDidMount?
oui, vous devriez traiter un appel api dans componentDidMount, si vous le souhaitez, je mettrai à jour le code du sandbox pour vous.
ce serait génial! Aussi, voici mon code pour this.getEvent () : return this.props.listOfEvents.events.find (event => event._id === this.props.match.params .eventId); Je pense que cela fonctionne de manière asynchrone car il est parfois indéfini. Est-ce vrai? Comment puis-je résoudre ce problème également? Merci beaucoup, vous êtes une bouée de sauvetage!
Tu es un sauveur! StackOverflow a besoin de plus de personnes comme vous!
Voyant que
getRegistrations ()est asynchrone, vous devrez en tenir compte lors de son appel. Considérez ceci:this.getRegistrations (event) .then ((registrations) => {console.log ('got data', registrations);})