Estoy tratando de enrutar a '/' después de que el usuario inicie sesión correctamente.
Actualmente, en mi archivo Login.JS, tengo la función handleSubmit que obtiene el resultado del formulario:
async function handleSubmit(e) { e.preventDefault() try { setError("") setLoading(true) await login(emailRef.current.value, passwordRef.current.value) history.push("/") } catch(error) { console.log(error) setError("Failed to Log In") } setLoading(false) }Luego, tengo un AuthContext que pasa el contexto de inicio de sesión
import React, { useContext, useEffect, useState } from 'react'; import { onAuthStateChanged, getAuth, signInWithEmailAndPassword} from 'firebase/auth'; import app from '../firebase' const AuthContext = React.createContext() export function useAuth() { return useContext(AuthContext) } export function AuthProvider({ children }) { const auth = getAuth() const [currentUser, setCurrentUser] = useState() const [loading, setLoading] = useState(true) function login(email, password) { return signInWithEmailAndPassword(auth, email, password) } useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (user) => { setCurrentUser(user) setLoading(false) }) return unsubscribe; }, [auth]) const value = { currentUser, login } return ( <AuthContext.Provider value={value}> {!loading && children} </AuthContext.Provider> ) }Puedo ver que el usuario puede iniciar sesión, sin embargo, no muestra nada en la página '/' y muestra este mensaje de error en la consola:
Advertencia: no se puede realizar una actualización de estado de React en un componente desmontado. Esto no es operativo, pero indica una pérdida de memoria en su aplicación. Para solucionarlo, cancele todas las suscripciones y tareas asincrónicas en una función de limpieza useEffect.
Hay dos puntos posibles que podrían estar causando esto; No estoy seguro de cuál es.
Primera posibilidad: en el efecto de uso, establece el estado dos veces seguidas. React intenta agrupar en lotes varios estados establecidos y hacer un solo renderizado, pero dado que se trata de una devolución de llamada asíncrona fuera del control de React, no puede hacerlo aquí. Por lo tanto, probablemente obtenga un procesamiento para cambiar el usuario, luego otro procesamiento para cambiar la carga. Si ese primer procesamiento hace que el componente se desmonte, podría generar un error cuando configura la carga.
En Reaccionar 18, este problema de procesamiento por lotes desaparecerá, pero hasta entonces, puede hacer que los dos estados establecidos sucedan como un grupo como este:
import { unstable_batchedUpdates } from "react-dom"; // ... useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (user) => { unstable_batchedUpdates(() => { setCurrentUser(user); setLoading(false); }); }); return unsubscribe; }, [auth]);Segunda posibilidad: podría estar en handleSubmit. Establece algún estado, inicia el inicio de sesión y lo espera, presiona el historial y luego establece el estado nuevamente. Si el componente se desmonta mientras espera la promesa, o al pasar al historial, obtendrá este problema. Si esta es la causa, entonces puede tener una referencia que se actualice cuando el componente se desmonte, y verifique esa referencia antes de hacer su estado de configuración final:
const mounted = useRef(true); useEffect(() => { return () => { mounted.current = false; } }, []); async function handleSubmit(e) { e.preventDefault(); try { setError(""); setLoading(true); await login(emailRef.current.value, passwordRef.current.value); history.push("/"); } catch (error) { console.log(error); if (mounted.current) { setError("Failed to Log In"); } } if (mounted.current) { setLoading(false); } }PD, eliminarán esta advertencia de reaccionar debido a todos los falsos positivos que genera, siendo su caso uno de ellos. No hay pérdida de memoria real en su código. Establece el estado una sola vez después del desmontaje, que reacciona ignorando inofensivamente, y luego eso es todo. Está derribando correctamente su oyente onAuthStateChanged.
useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (user) => { setCurrentUser(user) setLoading(false) }) return unsubscribe; }, [auth])No puede usar una declaración de devolución en lugar de una función de limpieza en el gancho useEffect.