Changer d'état lorsque les propriétés de changement et montez sur la Réaction de fonction Manquant?

J'ai rencontré un problème sur les états sur la base de propriétés.

Le scénario

J'ai un Composant parent qui crée passe une propriété d'un composant enfant.
Le composant Enfant réagit en fonction de la propriété reçus.
Dans Réagissent de la "seule" bonne façon de changer l'état d'un composant à l'aide des fonctions componentWillMount ou componentDidMount et componentWillReceiveProps autant que je l'ai vu (entre autres, mais concentrons-nous sur ceux-ci, parce que getInitialState est juste exécuté une fois).

Mon problème/Question

Si je reçois une nouvelle propriété de la société mère et je veux changer l'état, seule la fonction componentWillReceiveProps sera exécuté et m'a permis d'exécuter setState. Le rendu ne permet pas de setStatus.

Ce que si je veux mettre de l'état sur le début et le moment où il reçoit une nouvelle propriété?
Donc, je dois mettre sur getInitialState ou componentWillMount/componentDidMount. Ensuite, vous devez modifier l'état en fonction des propriétés à l'aide de componentWillReceiveProps.

C'est un problème quand votre état hautement dépend de vos propriétés, ce qui est presque toujours. Qui peut devenir stupide parce que vous avez à répéter les états que vous souhaitez mettre à jour selon la nouvelle propriété.

Ma solution

J'ai créé une nouvelle méthode qu'il appelle sur componentWillMount et sur componentWillReceiveProps. Je n'ai pas trouvé de méthode d'été appelés après que la propriété a été mis à jour avant de rendu et aussi la première fois que le Composant est monté. Alors il ne serait pas nécessaire de faire cette stupide solution de contournement.

De toute façon, ici, la question: n'est-il pas une meilleure option pour mettre à jour l'état lorsqu'un nouveau bien est reçu ou a changé?

/*...*/
/**
 * To be called before mounted and before updating props
 * @param props
 */
prepareComponentState: function (props) {
    var usedProps = props || this.props;

    //set data on state/template
    var currentResponses = this.state.candidatesResponses.filter(function (elem) {
        return elem.questionId === usedProps.currentQuestion.id;
    });
    this.setState({
        currentResponses: currentResponses,
        activeAnswer: null
    });
},
componentWillMount: function () {
    this.prepareComponentState();
},
componentWillReceiveProps: function (nextProps) {
    this.prepareComponentState(nextProps);
},
/*...*/

Je me sens un peu stupide, je crois que je vais perdre quelque chose...
Je pense qu'il y a une autre solution pour résoudre ce problème.

Et ouais, je sais déjà à ce sujet:
https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

InformationsquelleAutor bichotll | 2015-04-01
  1. 23

    J'ai trouvé que ce modèle est généralement pas très nécessaire. Dans le cas général (pas toujours), j'ai trouvé que l'établissement de l'état basée sur les modifications des propriétés est un peu un anti-modèle; au lieu de cela, il suffit de dériver la nécessaire local état au moment du rendu.

    render: function() {
  var currentResponses = this.state.candidatesResponses.filter(function (elem) {
    return elem.questionId === this.props.currentQuestion.id;
  });

  return ...; //use currentResponses instead of this.state.currentResponses
}

    Toutefois, dans certains cas, il peut être judicieux de cache de données (par exemple le calcul c'est trop cher), ou vous avez juste besoin de savoir quand les accessoires sont fixés/changé pour une autre raison. Dans ce cas, je voudrais utiliser essentiellement le modèle que vous avez écrit dans votre question.

    Si vous vraiment n'aime pas taper, on peut formaliser cette nouvelle méthode comme un mixin. Par exemple:

    var PropsSetOrChangeMixin = {
  componentWillMount: function() {
    this.onPropsSetOrChange(this.props);
  },

  componentWillReceiveProps: function(nextProps) {
    this.onPropsSetOrChange(nextProps);
  }
};

React.createClass({
  mixins: [PropsSetOrChangeMixin],

  onPropsSetOrChange: function(props) {
    var currentResponses = this.state.candidatesResponses.filter(function (elem) {
        return elem.questionId === props.currentQuestion.id;
    });

    this.setState({
      currentResponses: currentResponses,
      activeAnswer: null
    });
  },

  //...
});

    Bien sûr, si vous utilisez classà base de Réagir composants, vous auriez besoin de trouver une solution alternative (par exemple, l'héritage, ou de la coutume JS mixin) car ils ne reçoivent pas de Réagir de style mixin droit maintenant.

    (Pour ce que ça vaut, je pense que le code est beaucoup plus claire en utilisant les méthodes explicites; j'aurais pu l'écrire comme ça:)

    componentWillMount: function () {
  this.prepareComponentState(this.props);
},

componentWillReceiveProps: function (nextProps) {
  this.prepareComponentState(nextProps);
},

prepareComponentState: function (props) {
  //set data on state/template
  var currentResponses = this.state.candidatesResponses.filter(function (elem) {
    return elem.questionId === props.currentQuestion.id;
  });
  this.setState({
    currentResponses: currentResponses,
    activeAnswer: null
  });
},
    InformationsquelleAutor Michelle Tilley