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
Max Wolfen 12 avril 2018 à 12:21

4 réponses

Meilleure réponse

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)
  });
}
-6
asiniy 12 avril 2018 à 09:26

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?

7
Mayank Shukla 12 avril 2018 à 09:48

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]
       });
1
Arkej 12 avril 2018 à 09:29

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));
2
Trinu 12 avril 2018 à 09:25