web-dev-qa-db-fra.com

Appel d'une méthode à l'intérieur de getDerivedStateFromProps dans React

Avant la mise à niveau, réagissez à la version 16.3, J'appellerais une méthode basée sur des changements d'accessoires comme ceci:

componentWillReceiveProps(nextProps){
   if(this.props.country.length !== nextProps.country){
    doSomething(); //example calling redux action
    }
}

componentWillReceiveProps n'est pas sûr sur la version 16.3 et nous devons utiliser getDerivedStateFromProps . Cependant, cette méthode retourne un objet et je ne sais pas comment appeler une méthode de l'intérieur de la même manière que je le fais avec componentWillReceiveProps

reactjsreact-native
12
MBehtemam

Oui, vous devez renvoyer un objet, qui est le nouvel état dérivé de nextProp. Selon les documents:

getDerivedStateFromProps doit retourner un objet pour mettre à jour l'état, ou null pour indiquer que les nouveaux accessoires ne nécessitent aucune mise à jour d'état.

Mais puisque vous ne mettez pas à jour votre état de quelque manière que ce soit dans votre componentWillReceiveProps, vous devez utiliser componentDidUpdate au lieu de getDerivedStateFromProps:

componentDidUpdate(prevProps){
  if ( prevProps.country !== this.props.country.length ) {
    doSomething(); //example calling redux action
  }
}
16
Dane

Pour cette situation, il était bon que l'OP utilise componentDidUpdate mais je me suis retrouvé à avoir besoin de getDerivedStateFromProps donc j'ai dû rendre ma fonction personnalisée statique aussi et l'appeler en utilisant le nom de la classe à l'intérieur getDerivedStateFromProps. Quelque chose comme ça:

componentDidMount() {
    const something = ClassComponentName.runThisFunction();
    this.setState({ updatedSomething: something });
}

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.key !== prevState.key) {
        return { 
            updatedSomething: ClassComponentName.runThisFunction()
        };
    }
    return null;
}

static runThisFunction() {
    //do stuff and return value
}

Pour clarifier, cela met à jour l'état du composant en charge ainsi que lorsque de nouveaux accessoires arrivent. Cela m'a définitivement ramené à mes jours de langue dactylographiée. J'espère que ça aide!

7
Martavis P.