J'essaye de mettre à jour l'état, basé sur l'état précédent (array of objects)
avec les nouvelles valeurs entrantes en fase de object
. Mais pour certaines raisons, cela ne se produit pas ...
Qu'est-ce que je fais mal? Mon code:
handleCommentSubmit = (newEmployer) => {
console.log('handleCommentSubmit BEFORE', this.state.employers, newEmployer); // array(5)
this.setState((prevState, newEmployer) => {
employers: prevState.employers + newEmployer
});
console.log('handleCommentSubmit AFTER', this.state.employers); // still array(5)
}
Mon journal:
handleCommentSubmit BEFORE (6) [{…}, {…}, {…}, {…}, {…}, {…}], newEmployer: {first_name: "sdfsdf", last_name: "sdfsdf", birth_date: "123123-03-12", salary: "123123123"}
handleCommentSubmit AFTER (6) [{…}, {…}, {…}, {…}, {…}, {…}]
4 réponses
this.setState
devrait recevoir l'objet comme argument. Pas une fonction. Vous pouvez facilement utiliser this.state
:
handleCommentSubmit = (newEmployer) => {
this.setState({
employers: this.state.employers.concat(newEmployer)
});
}
Changements:
1- setState
est asynchrone, utilisez donc le rappel pour vérifier la valeur mise à jour.
2- Utilisez [].concat
pour pousser une nouvelle valeur dans le tableau, +
ne fonctionnera pas.
3- Vous ne renvoyez pas le object
à partir de la fonction de mise à jour.
Écrivez-le comme ceci:
handleCommentSubmit = (newEmployer) => {
this.setState((prevState, newEmployer) => ({
employers: prevState.employers.concat(newEmployer)
}), () => {
console.log('handleCommentSubmit AFTER', this.state.employers);
});
}
Vérifiez cette réponse pour plus de détails:
Pourquoi l'appel de la méthode setState ne mute pas l'état immédiatement?
Si votre employers
est un tableau, vous pouvez utiliser spread operator
dans setState:
[...prevState.employers, newEmployer]
Mais vous n'avez absolument pas besoin de prevState
. Vous pouvez simplement:
this.setState({
employers: [...this.state.employers, newEmployer]
});
Si vous appelez setState, il ne sera pas mis à jour immédiatement sur la ligne suivante. Il sera mis à jour après l'appel de la méthode de rendu. Si vous voulez voir le updatedState, vous pouvez écrire une fonction de rappel dans le setState comme ceci.
this.setState((prevState, newEmployer) => {
employers: prevState.employers + newEmployer
}, () => console.log('UpdatedState', this.state.employers));
Questions connexes
Questions liées
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.