Estoy tratando de usar el valor de currentUser en la función dentro de useEffect Hook, pero el valor parece no ser el objeto del usuario, que quiero que sea cuando lo uso. Aquí está el código:
function Chat() { const currentUser = useAuth() useEffect(() => { const fetchParticipants = async () => { console.log(currentUser.uid) // not defined } fetchParticipants() }, []) } Esa es la función useAuth() que se está llamando
export function useAuth() { const [ currentUser, setCurrentUser ] = useState(); useEffect(() => { const unsub = onAuthStateChanged(auth, user => setCurrentUser(user)); return unsub; }, []) return currentUser; }El valor inicial de currentUser no estará undefined porque eso es lo que (no) pasa al estado cuando lo configura en su enlace.
Entonces, el efecto primero se ejecutará con undefined como el valor de currentUser .
Más tarde, onAuthStateChanged activará y actualizará el estado.
Esto activará una nueva representación y currentUser será el valor que desee.
Sin embargo , su efecto no se volverá a ejecutar porque la matriz de dependencia es [] . Debe indicarle que vuelva a ejecutar la función cuando se actualice el valor.
useEffect(() => { const fetchParticipants = async () => { console.log(currentUser.uid) // not defined } fetchParticipants() }, [currentUser]) // <-------------------- Dependancy array