const [user,setuser] = useState() useEffect(()=> { try{ const User = (jwt_decode(localStorage.getItem("token"))) setuser(User) console.log(User) }catch(e){ } },[]) console.log(user) console :undefined VM7512:249 undefined App.js:27 {username: 'john4', password: '####', iat: 1649430959} App.js:42 {username: 'john4', password: '####', iat: 1649430959} VM7512:249 [object Object]¿Por qué el objeto del usuario da indefinido primero? ¿Hay alguna manera de evitar esto? Necesito que la consola solo registre el valor real y no indefinido.
const [user,setuser] = useState()
El valor predeterminado para el estado lo determina el argumento que pasa a useState . No está pasando nada, por lo que está implícitamente undefined .
Pasarle un valor.
const [user,setuser] = useState("not undefined"); Dicho esto, probablemente solo quieras lidiar con eso después de que se haya ejecutado el gancho useEffect . En cuyo caso, generalmente debe manejar el estado indefinido explícitamente.
Un ejemplo típico sería:
const [user,setuser] = useState() useEffect(.....); if (!user) { return <LoadingSpinner /> } return <UserDetails user={user} /> Y dicho esto, su enlace de efectos se ejecuta solo una vez (cuando el componente está montado) y no es asíncrono, por lo que podría mover la lógica a una función que pase a useState .
Esa función solo se ejecutará si el estado aún no se ha establecido, por lo que aún obtiene el beneficio de no volver a ejecutarla en cada renderizado:
const [user, setuser] = useState(() => { try { const User = (jwt_decode(localStorage.getItem("token"))) setuser(User) console.log(User) } catch (e) { } });