Comment vérifier quels accessoires ont changé dans componentwillreceeveprops

y a-t-il un moyen de vérifier quels accessoires ont changé (sans stocker les anciens accessoires ailleurs) à l'intérieur de componentWillReceiveProps?

i.e.

componentWillReceiveProps (newProps) {
  if( /* newProps.profileImage is different to previous props */ ) /* do stuff */
}
24
demandé sur Ilja 2016-07-29 12:03:56
la source

6 ответов

Notez que la fonction componenWillReceiveProps va deprecated dans l'avenir. Citing la documentation officielle:

Si vous avez utilisé componentWillReceiveProps pour recalculer certaines données seulement quand un prop change, utilisez plutôt un helper memoization.

ceci se réfère au cas où votre chèque à l'intérieur componentWillReceiveProps était d'éviter de recalculer inutilement la même chose plusieurs fois. Dans le billet de blog relié, il suggère de cacher le résultat de la fonction coûteuse afin qu'il puisse être recherché, plutôt que recalculé. Cela peut être fait en utilisant un helper tel que memoize -.

Si vous avez utilisé componentWillReceiveProps pour "réinitialiser" un état quand un les modifications proposées, envisager de faire un composant entièrement contrôlé ou totalement incontrôlée avec une clé à la place.

Encore une fois, le billet de blog relié décrit plus en détail, mais dans un résumé:

  • le composant "entièrement contrôlé" fait référence à un composant fonctionnel sans état (le composant parent est responsable de gérer l'état).
  • l'alternative" totalement incontrôlée " est celle qui utilise props état initial, puis ignore tous les autres changements aux accessoires.

Dans de très rares cas, vous pourriez vouloir utiliser le getDerivedStateFromProps cycle de vie comme un dernier Resort.

Cette fonction reçoit (props, state) et renvoie tout changement à l'état d'avant render est appelé, vous donnant le contrôle à faire ce que vous voulez.


réponse originale, pour les versions plus anciennes de React

Au point dans le temps que ce méthode du cycle de vie est appelée, this.props renvoie à l'ensemble précédent d'accessoires.

comparer une seule propriété foo sur les nouveaux supports, avec la même bien sur les anciennes, vous pouvez simplement comparer newProps.foothis.props.foo. Donc dans votre exemple:

componentWillReceiveProps (newProps) {
  if( newProps.profileImage !== this.props.profileImage ) /* do stuff */
}
28
répondu Tom Fenech 2018-06-11 12:06:13
la source

Depuis Réagir 16.3, componentWillReceiveProps n'est pas recommandé d'utiliser, veuillez vous référer unsafe_componentwillreceiveprops documentation sur le site react.

Utiliser getDerivedStateFromProps au lieu de:

static getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.profileImage !== prevState.profileImage ) {
    return {stateFoo: 'valueBar'};
  }
}

La valeur retournée se comporte de la même façon que setState.

8
répondu Ikeike 2018-04-26 08:23:10
la source

Vous pouvez également faire une boucle à travers tous les accessoires pour voir ce qui a changé.

componentWillReceiveProps(nextProps) {
  for (const index in nextProps) {
    if (nextProps[index] !== this.props[index]) {
      console.log(index, this.props[index], '-->', nextProps[index]);
    }
  }
}
5
répondu Etienne Martin 2018-02-01 01:15:28
la source

Vous pouvez toujours comparer à this.props.profileImage, car il ne sera mis à jour qu'après componentWilReceiveProps est appelée. Par exemple, dans le docs, cet exemple est utilisé:

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}
3
répondu Aurora0001 2016-07-29 12:06:27
la source

Oui, vous pouvez vérifier si une prop changé. this.props fait référence à la des accessoires avant ils ont changé. Ainsi, par exemple:

componentWillReceiveProps(newProps) {
  if( newProps.profileImage != this.props.profileImage ) {
    /* do stuff */
  }
}

Remarque: les accessoires ne changent pas nécessairement chaque fois que la méthode est appelée, il est donc intéressant de tester pour voir quel accessoire a changé.

0
répondu TimoSolo 2017-10-26 13:13:27
la source

juste comme une note à toute personne qui trouve cela dans le futur. Il semble que componentWillReceiveProps () va être déprécié. Docs suggère maintenant d'utiliser getDerivedStateFromProps (). Vous trouverez ici des explications sur les raisons pour lesquelles: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes

0
répondu Andrew Stover 2018-04-08 07:50:04
la source

Autres questions sur