0

no puedo pasar los datos de mi estado a un componente hijo

al intentar pasar datos a un componente, el estado se cambia a un objeto vacio

const [alumno, setAlumno] = useState({});

useEffect(() => {
    traerUsuario(curp).then(response => {
        setAlumno(response);
    });
}, [])
console.log(alumno)//aqui el console.log no funciona, de igual manera el estado queda vacio

return(
   //genera el error de igual manera ya que el estado esta vacio
    <div>{alumno.aceptado ? <Aceptado alumno={alumno} /> : <Rechazado alumno={alumno} />}</div>
)   

}

pero al cambiar el return por esto e intentar renderizarlo directamente todo sucede con normalidad

    return(
        <div>{alumno.nombre }</div>//renderiza el nombre con normalidad
    )  

saben que estare obviando? de antemano gracias

1
  • Cuando inicias el componente (o la App), el console.log que esta en tu outter scope, debe pintarse 2 veces, la primera vez estará vacío por la configuración que le diste al hook useState, pero la segunda vez debería traer el resultado de la asignación a setAlumno después de la operación asincrónica, puedes verificar y confirmar esto?
    – g.4
    Commented el 3 oct. 2020 a las 20:01

1 respuesta 1

0

Pareciera ser que el problema es que tu function traerUsuario() es asincrónica, por lo tanto a la hora de renderizar el objeto la promesa de la función no se ha resuelto y el valor de alumno es el que definiste en useState() que es un objeto vacío {}, podrías intentar algo así:

const [alumno, setAlumno] = useState({});

useEffect(() => {
    if(alumno ==={}){
        traerUsuario(curp).then(response => {
        setAlumno(response);
      });
    }
}, [alumno])

const alumnoMarkup = ()=>(
  (alumno==={})
  ?
  (<div> Cargando alumno, por favor espere...</div>)
  :
  (<div>{alumno.aceptado ? <Aceptado alumno={alumno} /> : <Rechazado alumno={alumno}/></div>)
);

return(
  {alumnoMarkup()}
)   

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.