我現在創建的代碼正在運行，但我認為它在某種程度上不是最理想的，因為它對許多資料庫讀取都是如此據我所知，“onAuthStateChange”可以理解為一個 useEffect 鉤子，每當用戶身份驗證時都會呼叫它狀態更改（登錄、注銷）。每當發生這種情況時，應檢查資料庫中用戶選擇的用戶名。但是，如果我查看控制臺，docSnap 會記錄相當多的次數，這對我來說表明該函式被呼叫的頻率比用戶登錄/注銷時更頻繁。
背景關系組件
import { createContext } from "react/cjs/react.production.min";
import { onAuthStateChanged } from "firebase/auth";
import { doc, getDoc } from "firebase/firestore";
import { auth,db } from "./firebase";
import { useState, useEffect } from "react";
export const authContext = createContext({
user: "null",
username: "null",
});
export default function AuthenticationContext(props) {
const [googleUser, setGoogleUser] = useState(null);
const [username, setUsername] = useState(null);
const [userID, setUserID] = useState(null);
onAuthStateChanged(auth, (user) => {
if (user) {
setGoogleUser(user.displayName);
setUserID(user.uid);
getUsername();
} else {
setGoogleUser(null);
}
});
const getUsername = async () => {
const docRef = doc(db, `users/${userID}`);
const docSnap = await getDoc(docRef);
if(docSnap.exists()){
setUsername(docSnap.data().username);
}
else{
setUsername(null);
}
};
return (
<authContext.Provider value={{ user: googleUser, username: username }}>
{props.children}
</authContext.Provider>
);
}
更重要的是，當我使用 google 登錄并提交用戶名時，組件不會被重新評估 - 因此需要重繪 才能使所有更改生效，這與我沒有更新狀態有關登錄頁面的 submitHandler。如果您對如何更專業地做到這一點有一些想法，請讓我聽聽。先感謝您！
在登錄頁面提交處理程式
const submitHandler = async (event) => {
event.preventDefault();
console.log(auth.lastNotifiedUid);
await setDoc(doc(db, "users", auth.lastNotifiedUid), {
displayName: user,
username: username,
});
await setDoc(doc(db, "usernames", username), { uid: auth.lastNotifiedUid });
};
uj5u.com熱心網友回復：
正如 Dharmaraj 在評論中指出的那樣，您將多個訂閱設定為身份驗證狀態。這是因為您呼叫onAuthStateChanged了組件的主體，因此它在每次渲染時執行。
為避免這種情況，您應該包裝該函式，useEffect以便您只訂閱組件安裝，并在卸載時取消訂閱：
export default function AuthenticationContext(props) {
/* ... */
React.useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => { /* ... */ });
return unsubscribe;
}, []);
/* ... */
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/454476.html
標籤：javascript 反应 火力基地 谷歌云火库 下一个.js
上一篇：當用戶首次登錄時，我可以在javascript中使用firebaseAuth的signInWithPhoneNumber時設定自定義UID嗎？[復制]
下一篇：Firestore集合訂閱定價