He estado trabajando en un pequeño proyecto en donde obtengo datos de un backend personal. La cosa es que cuando obtengo los datos los seteo en un estado. Y luego los paso a un componente, la primera vez renderizan bien, pero cuando me muevo de una página a otra el estado lo pierdo y se vuelve indefinido.(ejemplo estoy en el perfil me muevo a la configuración y vuelvo al perfil aparece todo undefined)
A continuación les dejo una muestra de mi código:
const Profile = () => {
const classes = useStyles();
const [user, setUser]=useState({})
useEffect(async ()=>{
const token = localStorage.getItem("token")
try {
const {data} = await axios.get("api/user/data")
setUser(data.user)
} catch (error) {
console.log(error)
Alert("error", "Por favor, inicia sesión nuevamente")
setTimeout(()=>{
router.push("/signIn")
},3000)
}
},[])
//getProfileUser
return (
<Layout className={classes.root}>
<ToastContainer/>
<Intro description={user.description} hobbies ={user.hobbies}/>
</Layout>
);
};
export default Profile;
y acá es donde quisiera mostrar los datos como la descripción y los hobbies, intenté colocarlos en estados pero pasaba igual.
const Intro = (Props) => {
const classes = useStyles();
const hobbies = Props.hobbies
return (
<Card className={classes.container}>
<CardContent>
<Typography className={classes.title} color='textPrimary' gutterBottom>
Sobre mi
</Typography>
<Typography variant='body1' align='justify' children={Props.description} />
<Typography>
<span style={{ fontSize: '30px' }}>🎮</span> Mis hobbies:
</Typography>
{
hobbies.map((hobbies, index)=>(
<ul>
<li key={index}>
{hobbies}
</li>
</ul>
))
}
</CardContent>
</Card>
);
};
Gracias por leerme (: espero qque estén teniendo una linda noche. Muchas gracias de antemano