我的導航欄旁邊有一個用戶欄組件，顯示頭像和顯示名稱（用戶詳細資訊保存在以用戶 ID 命名的檔案中）。我按照 firestore 檔案進行實時更新。放置在一個使用效果鉤子中，該鉤子有一個依賴陣列，但會重復觸發，每個登錄用戶每分鐘觸發大約 4,000 個呼叫）。
我真的只想在用戶更新他們的顯示名稱或頭像時更新快照。（在不同的表單組件上找到）
我在控制臺記錄了專案中的每個 useEffect 掛鉤，以將其縮小到該組件。是否存在導致此問題的依賴陣列？有沒有更好的方法來寫這個？謝謝！
export default function UserBar() {
const { user } = useAuthContext()
const [me, setMe] = useState([])
useEffect(() => {
//user real-time subscription for avatar and displayname
const auth = getAuth()
const fireUser = auth.currentUser
const unsub = onSnapshot(doc(db, "users", fireUser.uid), (doc) => {
if (doc.exists()) {
setMe(doc.data())
console.log('looking for duplicate - userbar unsub')
} else {
console.log("No such document!")
}
})
return () => unsub()
}, [me])
return (
<>
{user && (
<div className="user-bar">
<p className="oneHunid">Welcome
<span className="bold"> {user.displayName}!</span>
</p>
<Avatar src={me.photoURL} />
</div>
)}
</>
)
}
uj5u.com熱心網友回復：
您不希望[me]在useEffect()呼叫setMe(). 這導致了一個無限回圈：
me得到一個新值，所以渲染me有一個新值，所以運行useEffect()useEffect()來電setMe()- 去#1
基于上述，看起來你真正想要的是讓你useEffect()依賴于auth.currentUser. 因此，在 useEffect()之外獲取該值，然后檢查以確保它不是null. 如果不是null，則啟動onSnapshot()監聽器。
順便說一句：如果有幫助，請查看我開發的 Firebase Auth 專案的用戶組態檔。特別是，查看FirebaseProvider.js我配置 Firebase 專案并獲取其所有服務的位置，以及AuthProvider.js提供登錄、注銷、注冊和“用戶組態檔”的位置。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/486759.html