¿Cuándo usar el método de ciclo de vida de componentWillReceiveProps?

Brenda, parte de este gran equipo, nos ha hecho el favor de crear esta sección ya que conoce a la perfección este tema.

Solución:

componentWillReceiveProps es necesario si desea actualizar los valores de estado con nuevos valores de accesorios, se llamará a este método cada vez que ocurra algún cambio en los valores de accesorios.

---

En su caso, ¿por qué necesita este método componentWillReceiveProps?

Porque está almacenando los valores de accesorios en la variable de estado y usándolos así:

this.state.KeyName

por eso necesitas componentWillReceiveProps método de ciclo de vida para actualizar el valor de estado con el nuevo valor de accesorios, solo se actualizarán los valores de accesorios del componente, pero automáticamente el estado no se actualizará. Si no actualiza el estado, entonces this.state siempre tendrá los datos iniciales.

componentWillReceiveProps no será necesario si no almacena los valores de accesorios en el estado y usa directamente:

this.props.keyName

Ahora, reaccionar siempre usará valores de accesorios actualizados dentro del método de renderizado, y si ocurre algún cambio en los accesorios, volverá a renderizar el componente con nuevos accesorios.

según DOC:

componenteWillReceiveProps() se invoca antes de que un componente montado reciba nuevos accesorios. Si necesita actualizar el estado en respuesta a los cambios de prop (por ejemplo, para restablecerlo), puede comparar this.props y nextProps y realizar transiciones de estado usando this.setState() en este método.

React no llama a componentWillReceiveProps con accesorios iniciales durante el montaje. Solo llama a este método si algunos de los accesorios del componente pueden actualizarse.

Sugerencia:

No almacene los valores de accesorios en el estado, use directamente this.props y crea los componentes de la interfaz de usuario.

Actualizar

componentDidUpdate()

ahora debe usarse en lugar de componentWillReceiveProps

también vea un artículo de gaearon sobre la escritura de componentes resilientes

Hay dos problemas potenciales aquí

1. No reasigne sus accesorios para indicar que es lo que está usando redux para extraer los valores de la tienda y devolverlos como accesorios a su componente

Evitar el estado significa que ya no necesita su constructor o métodos de ciclo de vida. Por lo tanto, su componente se puede escribir como un componente funcional sin estado, hay beneficios de rendimiento al escribir su componente de esta manera.

2. No necesita envolver su acción en despacho si está pasando mapDispatcahToProps. Si se pasa un objeto, se supone que cada función dentro de él es un creador de acción. Se devolverá un objeto con los mismos nombres de función, pero con cada creador de acción envuelto en un envío.

A continuación se muestra un fragmento de código que elimina el estado de su componente y se basa en el estado que se ha devuelto desde la tienda redux

import React from "react";
import  connect  from "react-redux";

const TrajectContainer = ( trajects, addTraject ) => (
	

		
Trajects
		Add new Traject
		trajects.map(traject => )
	
);

const mapStateToProps = ( trajects ) => ( trajects );

export default connect( mapStateToProps,  addTraject )(TrajectContainer);

En su caso requerirá componentWillReceiveProps y tienes que actualizar el estado cuando recibes nuevos accesorios. Porque

• En su constructor, ha declarado su estado de la siguiente manera. Como puedes ver construyes tu state usando los accesorios que se pasan. (Es por eso que necesita componentWillReceiveProps y la lógica para actualizarlo allí)

  this.state = 
      trajects: props.trajects,
      onClick: props.onClick
  ;
  

• Así que cuando tus accesorios cambien componentWillReceiveProps es la función que se llama. El constructor no se llama. Entonces, debe establecer el estado nuevamente para que los cambios entren en el estado del componente.

• Sin embargo, su lógica debe ser la siguiente. Con una condición para que pueda evitar actualizaciones de estado repetidas si se llama varias veces.

  componentWillReceiveProps(nextProps) 
   console.log('componentWillReceiveProps', nextProps);
   if (this.props !== nextProps) 
    this.setState(nextProps);
   
  
  

Uno debe almacenar los accesorios en el estado, solo si va a modificar su contenido. Pero en tu caso veo que no hay modificación. Entonces puedes usar directamente this.props.trajects directamente en lugar de almacenarlo en el estado y luego usarlo. De esta manera puedes deshacerte de la componentWillReceiveProps
Entonces su función de renderizado usará algo como a continuación

this.props.trajects.map(traject => //what ever is your code.... 

Si te sientes estimulado, tienes la habilidad dejar una reseña acerca de qué te ha parecido esta división.

---

---

Utiliza Nuestro Buscador