reactjs - renderizar - Cambiar el estado cuando cambian las propiedades y primero montar en Reacción-¿Falta la función?

react comunicacion entre componentes

Question

Me he encontrado con un problema sobre los estados basados ​​en propiedades.

El escenario

Tengo un componente principal que crea pasa una propiedad a un componente secundario. El componente Niño reacciona de acuerdo a la propiedad recibida. En React, la "única" forma correcta de cambiar el estado de un componente es usar las funciones componentWillMount o componentDidMount y componentWillReceiveProps hasta donde he visto (entre otras, pero concentrémonos en estas, porque getInitialState solo se ejecuta una vez).

Mi problema / pregunta

Si recibo una nueva propiedad del padre y deseo cambiar el estado, solo se ejecutará la función componentWillReceiveProps y me permitirá ejecutar setState. Render no permite establecer estado.

¿Qué sucede si deseo establecer el estado al principio y la hora en que recibe una nueva propiedad? Así que tengo que configurarlo en getInitialState o componentWillMount / componentDidMount. Luego, debe cambiar el estado en función de las propiedades utilizando componentWillReceiveProps.

Este es un problema cuando su estado depende en gran medida de sus propiedades, que es casi siempre. Lo cual puede volverse tonto porque tiene que repetir los estados que desea actualizar de acuerdo con la nueva propiedad.

Mi solución

He creado un nuevo método que se llama en componentWillMount y en componentWillReceiveProps. No he encontrado ningún método al que se haya llamado después de que una propiedad se haya actualizado antes del procesamiento y también la primera vez que se monta el componente. Entonces no habría necesidad de hacer esta solución tonta.

De todos modos, aquí está la pregunta: ¿no hay una mejor opción para actualizar el estado cuando se recibe o cambia una nueva propiedad?

/*...*/
/**
 * 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);
},
/*...*/

Me siento un poco estúpido, creo que estoy perdiendo algo ... Supongo que hay otra solución para resolver esto.

Y sí, ya lo sé: https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

Answer 1

He encontrado que este patrón no suele ser muy necesario. En el caso general (no siempre), he encontrado que establecer el estado en función de las propiedades modificadas es un poco anti-patrón; en su lugar, simplemente derive el estado local necesario en el tiempo de renderizado.

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
}

Sin embargo, en algunos casos, puede tener sentido almacenar estos datos en caché (por ejemplo, tal vez calcularlos es prohibitivamente costoso), o simplemente necesita saber cuándo se establecen / cambian las propiedades por algún otro motivo. En ese caso, usaría básicamente el patrón que has escrito en tu pregunta.

Si realmente no te gusta escribirlo, podrías formalizar este nuevo método como una mezcla. Por ejemplo:

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
    });
  },

  // ...
});

Por supuesto, si está utilizando componentes React basados ​​en class , tendrá que encontrar alguna solución alternativa (por ejemplo, herencia, o mixins JS personalizados) ya que no tienen mixins estilo React en este momento.

(Para lo que vale la pena, creo que el código es mucho más claro con los métodos explícitos; probablemente lo escribiría así :)

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
  });
},