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));