#javascript #reactjs #firebase #firebase-authentication #react-hooks
#javascript #reactjs #firebase #firebase-аутентификация #реагирующие хуки
Вопрос:
Я нашел разные уже отвеченные вопросы на мой вопрос, но они не помогают.
Я использую пользовательский контекст для вызова firebase.auth().onAuthStateChanged()
и установки currentUser
.
import React, { useState, useEffect } from "react";
import app from "../firebase";
export const AuthContext = React.createContext();
export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);
useEffect(() => {
app.auth().onAuthStateChanged(setCurrentUser);
}, []);
return (
<AuthContext.Provider value={{ currentUser }}>
{children}
</AuthContext.Provider>
);
};
В моем компоненте я вызываю AuthContext
и currentUser
:
import React, { useContext, useEffect, useState } from "react";
import app from "./firebase";
import { AuthContext } from "./Auth/Auth";
function MyComponent() {
const [invoices, setInvoices] = useState([]);
const { currentUser } = useContext(AuthContext);
const getInvoices = () => {
const database = app.firestore();
const unsubscribe = database
.collection("invoices")
.where("uid", "==", currentUser.uid) // HERE currentUser IS NULL
.orderBy("date", "desc")
.onSnapshot((snapshot) => {
setInvoices(
snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
);
});
return () => {
unsubscribe();
};
};
useEffect(() => {
getInvoices();
}, []);
return (<> ... </>);
}
export default MyComponent;
Я считаю, что моя проблема как-то связана с обещаниями, и пользователь еще не загружен. Но все же я не знаю, что здесь делать.
Комментарии:
1. Я бы отладил, если
onAuthStateChanged((user) => console.log(user))
сначала что-то показывает или нет.
Ответ №1:
Потенциальной проблемой может быть значение currentUser
returns немного позже, поэтому вам нужно добавить дополнительную проверку в свой MyComponent
компонент.
Я бы добавил null
проверку currentUser
и расширил массив зависимостей как:
useEffect(() => {
if (currentUser) {
getInvoices();
}
}, [currentUser]);
Вероятно, в первом раунде useEffect
обратный вызов, выполнявшийся один раз currentUser
, был неподвижным null
.
Комментарии:
1. @T.Karter Потрясающе, рад помочь! 🙂