Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

205
Vistas
Cómo usar componentWillReceiveProps en componentes funcionales

Soy nuevo en los componentes funcionales después de pasar mucho tiempo con los componentes de clase. Mientras probaba algo, me encontré con algunos problemas. Cómo usar componentWillReceiveProps en el contexto del gancho useEffect ,

 componentWillReceiveProps(nextProps) { if (_.isEmpty(nextProps.user)) { this.props.history.push("/signin"); } this.setState({ selImg: nextProps.meetingData.themeImage, }); }
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

  • Envuelva el efecto secundario de cambiar la ruta en un useEffect() , y hágalo dependiente del user , para que reaccione cada vez que user cambie. También necesita el history como una dependencia, pero no cambiaría.

  • Asigne meetingData.themeImage a una const o utilícelo directamente, ya que el componente se volverá a representar de todos modos si cambia.

     const Example = ({ user, history, meetingData }) => { useEffect(() => { if (_.isEmpty(user)) { history.push("/signin"); } }, [user, history]); const selImg = meetingData.themeImage; return ( // JSX ); }
about 4 years ago · Juan Pablo Isaza Denunciar

0

Esto podría ser equivalente a useEffect con dependencia en el componente funcional:

 useEffect(() => { if (_.isEmpty(props.user)) { props.history.push("/signin"); } setState({ selImg: props.meetingData.themeImage, }); }, [props.user]);
about 4 years ago · Juan Pablo Isaza Denunciar

0

A continuación se muestra la implementación funcional de su código.

En lugar de setState , puede usar useState , en lugar de componentWillReceiveProps , puede escuchar actualizaciones de variables usando useEffect .
Tenga en cuenta el segundo argumento de useEffect , la matriz de dependencias. Allí puede elegir qué actualizaciones activarán la primera variable de useEffect (es decir, la devolución de llamada).

 function FunctionalImplementation({ user, history, meetingData }) { // The functional equivalent of `this.state = { selImg: null }` const [selImg, setSelImg] = useState(null); useEffect(() => { if (_.isEmpty(user)) { history.push("/signin"); } // You might want to put this inside an `else` block, just to be more clear setSelImg(meetingData.themeImage); // If you want to update `selImg` when `props.meetingData` changes too, // add it to useEffect's dependencies array }, [user, history]); }
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda