首頁猿問登錄時從用戶集合中獲取用戶數據

登錄時從用戶集合中獲取用戶數據

JavaScript

30秒到達戰場 2023-08-18 14:20:07

我目前正在開發一個在客戶端初始化了 firebase 的應用程序。當用戶通過 firebase 登錄時，我想從 firestore 獲取用戶的數據。我目前正在onAuthStateChanged偵聽器中執行此操作并成功獲取用戶。我想知道這是否是獲取用戶數據的最佳方式。我的代碼如下： const [currentUser, setCurrentUser] = useState(null) const [authState, setAuthState] = useState(false) useEffect(() => { console.log('state unknown') setAuthState(false) auth().onAuthStateChanged(user => { if (!user) { return } const sourceRef = firestore() .collection('users') .where('userId', '==', user.uid) sourceRef .get() .then(snapshot => { if (snapshot.empty) { console.log('user not found') } else { let data = {} snapshot.forEach(item => (data = item.data())) console.log(data) setCurrentUser(data) setAuthState(true) } }) .catch(error => console.log(error.code)) }) }, []) return ( <AppContext.Provider value={{ currentUser, authState }}> {children} </AppContext.Provider> )}我主要擔心的是每次刷新應用程序時都會獲取用戶的數據。任何有關此事的建議或最佳實踐將不勝感激

查看完整描述

1 回答

忽然笑

TA貢獻1806條經驗獲得超5個贊

恕我直言，您使用上下文 API 和身份驗證觀察者的方法已經很好，只有一些小問題：

你應該取消訂閱你的觀察者，正如 Awran5 提到的那樣
您可以觀察用戶數據，而不是只獲取一次
您可以將上下文分開以提高可讀性和性能
您可以使用所有者的 id 在集合 users 中創建文檔，這樣您就可以直接訪問collection("users").doc(authUser.uid)而不是進行查詢

這是我修改您的示例的方法，不確定這是否是最好的方法，我正在等待其他人的評論：

const AuthContext = React.createContext();

function AuthProvider({ children }) {

const [authUser, setAuthUser] = React.useState(undefined);

React.useEffect(() => {

return firebase.auth().onAuthStateChanged(user => setAuthUser(user));

}, []);

return <AuthContext.Provider value={authUser}>{children}</AuthContext.Provider>;

}

const UserDataContext = React.createContext();

function UserDataProvider({ children }) {

const [userData, setUserData] = React.useState(null);

const authUser = React.useContext(AuthContext);

React.useEffect(() => {

if (!authUser) return;

const query = firebase.firestore().collection("/users").where("userId", "==", authUser.uid);

return query.onSnapshot(snapshot => setUserData(snapshot.empty ? null : snapshot.docs[0].data()));

}, [authUser]);

return <UserDataContext.Provider value={userData}>{children}</UserDataContext.Provider>;

}

export default function App() {

return (

{/* ... other components */}

</UserDataProvider>

</AuthProvider>

);

}

function MyComponent() {

const authUser = React.useContext(AuthContext);

const userData = React.useContext(UserDataContext);

if (authUser === undefined) return <div>loading user authentication...</div>;

if (authUser === null) return <div>logged out</div>;

return <div>User data: {JSON.stringify(userData)}</div>;

}

您的組件仍將在身份驗證狀態更改或用戶數據更改時重新呈現，但僅在需要時重新呈現。

反對回復 2023-08-18

1 回答
0 關注
138 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

登錄時從用戶集合中獲取用戶數據

登錄時從用戶集合中獲取用戶數據

1 回答

添加回答