2
votes

Appeler une fonction après des changements d'état

Je suis en train de créer une application React Native et lorsqu'un bouton est enfoncé, je souhaite appeler deux fonctions. Le premier effectuera un appel get et définira l'état loading: true , le second affichera une fenêtre contextuelle avec le résultat de cet appel get.

J'appelle la deuxième fonction uniquement si loading === false mais il est exécuté immédiatement après le premier avant que l'état puisse changer, car le chargement est false par défaut. Je peux résoudre ce problème avec setTimeout mais je me demandais s'il y avait un moyen plus propre de le faire.

onPress() {
  this.props.getUsers();
  setTimeout(() => {
    if (this.props.loading === false) {
      this.props.popUpVisible();
    }
  }, 1000);
}

react-native

0 commentaires

3 Réponses :

0
votes

Utilisez getDerivedStateFromProps. Il se déclenche toujours lorsque les accessoires du composant changent. Voici l'exemple.

class EmailInput extends Component {
  state = {
    email: this.props.defaultEmail,
    prevPropsUserID: this.props.userID
  };

  static getDerivedStateFromProps(props, state) {
    // Any time the current user changes,
    // Reset any parts of state that are tied to that user.
    // In this simple example, that's just the email.
    if (props.userID !== state.prevPropsUserID) {
      return {
        prevPropsUserID: props.userID,
        email: props.defaultEmail
      };
    }
    return null;
  }

  // ...
}

0 commentaires

1
votes

Vous pouvez créer une fonction de rappel pour cette

onPress = () => {
  this.props.getUsers(() => {
    if (this.props.loading === false) {
      this.props.popUpVisible();
    }
  });
}

Dans la fonction onPress

getUsers = (callback) => {
  //do whatever you want

  //when it's done
  callback();
}

0 commentaires

1
votes

setState La fonction peut prendre deux paramètres:

setState (mise à jour, rappel)

setState({loading:true},() => { 
     //this fires once state.loading === true

})

0 commentaires