1
votes

Comment appeler 2 fonctions après l'appel de setState dans React?

Je dois appeler 2 fonctions juste après la mise à jour de setState . Je souhaite utiliser la fonction de rappel. Mais le problème est qu'une fonction est présente dans le composant actuel et l'autre fonction que j'appelle du composant enfant (en utilisant des refs). Le code ressemble à ceci:

  handleChange_First = (event) => {
    

    const name = event.target.name;
   
    this.setState({
        [name]: event.target.value
    },() => {this.calculate()});
    this.child.handleChange(event)
   }

Je veux appeler this.calculate () et this.child.handleChange (event) , dès que le setState est modifié. En ce moment, il met à jour la valeur du composant actuel (this.calculate) mais la valeur du composant enfant (handleChange) ne se met pas à jour.

Ou s'il existe un autre moyen d'appeler les deux fonctions simultanément juste après setState , cela sera également très utile.

reactjs callback function

2 commentaires

Le handleChange du composant enfant ne s'exécute-t-il pas ou ne met pas à jour la valeur?

Le composant enfant est en cours d'exécution mais prend la valeur précédente de du composant actuel plutôt que la valeur mise à jour (par exemple, vous entrez 1 dans le composant actuel, cela ne changera rien dans l'enfant mais lorsque vous entrez 2, le composant enfant prendra 1 et bientôt)

3 Réponses :

2
votes

Entrez le deuxième appel de fonction dans le corps de la fonction de rappel. Essayez ceci:

handleChange_First = (event) => {
        const name = event.target.name;

        this.setState({[name]: event.target.value},() => {
                this.calculate();
                this.child.handleChange(event);
              });
}

1 commentaires

J'ai essayé cela avant, mais cela génère une erreur: TypeError: Impossible de lire la propriété 'target' de undefined. cette erreur est due à this.child.handleChange (événement).

2
votes

React utilise un modèle d'événement synthétique. À partir de la documentation :

Le SyntheticEvent est regroupé. Cela signifie que l'objet SyntheticEvent sera réutilisé et que toutes les propriétés seront annulées une fois que le rappel d'événement a été appelé. Ceci pour des raisons de performances. En tant que tel, vous ne pouvez pas accéder à l'événement de manière asynchrone.

C'est la même raison, vous ne pouvez pas utiliser event dans le rappel. ( setState est asynchrone, la raison pour laquelle vous avez dû utiliser le rappel en premier lieu)

Il y a cependant une trappe d'échappement, vous pouvez demander à React de ne pas regrouper l'événement en appelant event.persist ()

handleChange_First = (event) => {
  event.persist();
  const name = event.target.name;

  this.setState({[name]: event.target.value},() => {
     this.calculate();
     this.child.handleChange(event);
  });
}

1 commentaires

Vous êtes vraiment un sauveur de vie :) Merci beaucoup.

0
votes

Vous pouvez essayer d'appeler par un setTimeout, qui exécutera la fonction indépendamment.

handleChange_First = (event) => {

    const name = event.target.name;

    this.setState({
        [name]: event.target.value
    },() => {this.calculate()});

    setTimeOut(()=>{
      this.child.handleChange(event);
    })
   }

1 commentaires

Il lève cette erreur: TypeError: Impossible de lire la propriété «nom» de null.