Tengo el siguiente código para App.js. El enlace useEffect se ejecutará al inicio de la aplicación, y espero que recupere un objeto de localStorage y luego lo configure en la variable de usuario useState.
SALIDA DE CONSOLA.REGISTRO:
Usuario JSON {"nombre":"probador","nombre de usuario":"nombre de usuario de prueba","contraseña":"contraseña de prueba","token":"token de prueba"}
usuario analizado {nombre: 'probador', nombre de usuario: 'nombre de usuario de prueba', contraseña: 'contraseña de prueba', token: 'token de prueba'}
usuario conectado actual: nulo
const App = (props) => { const [user, setUser] = useState(null); useEffect(() => { // CHECK IF THERE IS A LOGGED IN USER FROM PREVIOUS SESSIONS const loggedUserJSON = window.localStorage.getItem("loggedInUser"); if (loggedUserJSON) { console.log("JSON user", loggedUserJSON); const parsedUser = JSON.parse(loggedUserJSON); console.log("parsed user", parsedUser); setUser(parsedUser); } console.log("current logged in user: ", user); }, []);Y el siguiente es el controlador de eventos para mi componente de inicio de sesión:
const login = async (event) => { event.preventDefault(); try { const user = await UserService.login({ username: username, password: password, }); window.localStorage.setItem("loggedInUser", JSON.stringify(user)); history.push("/home"); } catch (exception) { console.log(exception); } };Ahora puedo ver que el objeto entra correctamente en el almacenamiento local del navegador, e incluso puedo analizarlo correctamente en función de mi resultado de console.log. Pero de alguna manera
setUser(parsedUser);no funciona Da el valor predeterminado de nulo. ¿Qué hace que setUser falle?
La función setUser useState no asignará instantáneamente el valor al usuario como user = parsedUser , está funcionando de manera diferente, solo establecerá su valor en el próximo renderizado,
comprueba la respuesta en este enlace.
useState establece el método que no refleja el cambio inmediatamente
Solución
Puede verificar el valor en su próximo renderizado, o puede verificar el cambio en otro useEffect
const App = (props) => { const [user, setUser] = useState(null); useEffect(() => { // CHECK IF THERE IS A LOGGED IN USER FROM PREVIOUS SESSIONS const loggedUserJSON = window.localStorage.getItem("loggedInUser"); if (loggedUserJSON) { console.log("JSON user", loggedUserJSON); const parsedUser = JSON.parse(loggedUserJSON); console.log("parsed user", parsedUser); setUser(parsedUser); } console.log("current logged in user: ", user); // this will only print null because `setUser(parsedUser)` is not yet reflected }, []); console.log("current logged in user on every render: ", user); // this will console the value on its second render, becase second render happens when ` setUser(parsedUser);` completed } Otro método para verificar el cambio es usar uno otro useEffect
const App = (props) => { const [user, setUser] = useState(null); useEffect(() => { // CHECK IF THERE IS A LOGGED IN USER FROM PREVIOUS SESSIONS const loggedUserJSON = window.localStorage.getItem("loggedInUser"); if (loggedUserJSON) { console.log("JSON user", loggedUserJSON); const parsedUser = JSON.parse(loggedUserJSON); console.log("parsed user", parsedUser); setUser(parsedUser); } console.log("current logged in user: ", user); // this will only print null becase `setUser(parsedUser)` is not yet reflected }, []); useEffect(()=> { console.log("current logged in user on every render: ", user); // this will console the value every time user value changes intially it will be null and on second time it will show your data },[user]) }