Estoy usando Firebase para autenticar a un usuario, luego uso la ID de Firebase (uid) para establecerUserData con la fila del usuario en Postgres a través de una solicitud HTTP. Funciona como está escrito, pero tengo problemas con la ejecución de la orden de estas funciones porque la consola devuelve 'sintaxis de entrada no válida para el tipo entero: "indefinido"'.
El orden deseado es
En cambio, parece ejecutar 2, 1, 3, 2. En el segundo intento de HTTP, se completan los datos. Esto explica por qué a veces necesito cerrar sesión y volver a iniciar sesión para que ciertos componentes se carguen con los datos del usuario.
¿Qué me falta para asegurar el orden correcto de las operaciones?
Iniciar sesión.js
async function handleSubmit(e) { e.preventDefault() try { setError("") setLoading(true) await login(emailRef.current.value, passwordRef.current.value) setLoading(false) history.push("/") } catch { setLoading(false) setError("Failed to log in") }autenticación.js
useEffect(() => { const fetchProfile = (uid) => { axios.get(`/user/${uid}`) .then(async (response) => { setUserData(await response.data) console.log(response.data) console.log(uid) }) .catch(error => console.error(`Error: ${error}`)) } const unsubscribe = auth.onAuthStateChanged(async user => { user && fetchProfile(user.uid) setCurrentUser(user) setLoading(false) }) return unsubscribe }, []) const value = { currentUser, userData, login, signup, logout, resetPassword, updateEmail, updatePassword } return ( <AuthContext.Provider value={value}> { !loading && children} </AuthContext.Provider> )fetchProfile como una función y movería la cancelación de unsubscribe fuera de useEffect y tendría currentUser como una dependencia para useEffect . useEffect solo se ejecutaría cuando currentUser haya cambiado.
... const unsubscribe = auth.onAuthStateChanged(async user => { //only if there is a user setCurrentUser if(user){ setCurrentUser(user) setLoading(false) } }) useEffect(() => { if(!currentUser) return axios.get(`/user/${currentUser.uid}`) .then(async (response) => { setUserData(await response.data) console.log(response.data) console.log(uid) }) .catch(error => console.error(`Error: ${error}`)) }, [currentUser]) ...