Estoy trabajando en una barra de navegación que cambia cada vez que detecta que hay un usuario en el almacenamiento local usando useState y useEffect. Aquí está mi lógica:
const [user, setUser] = useState("") function fetchData(){ const item = JSON.parse(localStorage.getItem('name')) if(item) { setUser(item) } } useEffect(() => { fetchData() }); return({user? (<LoggedIn />) : (<ClientBar />}) Básicamente, el código comienza sin ningún usuario y, en la función fetchData() , comprueba si existe un usuario en el almacenamiento local y establece el usuario en función de lo que se ha encontrado en el almacenamiento local. Puedo decir que la lógica funciona porque cuando la actualizo, cambia de <ClientBar> a <LoggedIn> . Sin embargo, el problema es que no funciona al iniciar sesión, sino que requiere una actualización para actualizar. ¿Hay alguna manera de hacer que se actualice inmediatamente después de iniciar sesión?
Como dijo Abhi Patil, debe verificar los cambios de almacenamiento local. No tiene nada que ver con useEffect ya que solo se activa cuando se monta el componente.
Debe envolver fetchData() dentro del detector de eventos storage de esta manera:
useEffect(() => { window.addEventListener('storage', () => { const item = JSON.parse(localStorage.getItem('name')) if(item) { setUser(item) } }) })Su useEffect debe ser:
useEffect(() => { fetchData() }, [user]) Entonces, cuando user cambie, lo verificará cada vez. Debido a que está localstorage , también lo animo a agregar un componente de carga mientras se hace eso.
Verificar el almacenamiento local también debería usar async/ localstorage :
const fetchData = async () => { const item = await JSON.parse(localStorage.getItem('name')) if(item) setUser(item) } Mientras espera la verificación, debe realizar una carga con otro estado de useState .