我正在嘗試在我的頂級組件上設(shè)置Firebase 身份驗(yàn)證偵聽器App,以便authUser通過 React 上下文向所有其他組件提供對象。我目前正在這樣做:function App() { console.log('Rendering App...'); const [authUser,setAuthUser] = useState(null); const [authWasListened,setAuthWasListened] = useState(false); useEffect(()=>{ console.log('Running App useEffect...'); return firebase.auth().onAuthStateChanged( (authUser) => { console.log(authUser); console.log(authUser.uid); if(authUser) { setAuthUser(authUser); setAuthWasListened(true); } else { setAuthUser(null); setAuthWasListened(true); } } ); },[]); return( authWasListened ? <Layout/> : <div>Waiting for auth...</div> );}但我得到了日志輸出:Rendering App...Running App useEffect...似乎我正在設(shè)置偵聽器但它一開始沒有運(yùn)行,因此它沒有獲得當(dāng)前的身份驗(yàn)證狀態(tài)(它是空的,因?yàn)槲沂仓吝€沒有登錄表單)。似乎在等待改變的發(fā)生。不應(yīng)該首先authListener獲取當(dāng)前authUser狀態(tài),然后再聽更改嗎?我究竟做錯了什么?更新我已經(jīng)發(fā)現(xiàn)我做錯了什么。本useEffect應(yīng)該返回一個函數(shù)來清除聽眾unmount,而不是一個函數(shù)調(diào)用,因?yàn)槲蚁肷厦孀?。所以我的聽眾從來沒有被設(shè)置過。這現(xiàn)在按預(yù)期工作:useEffect(()=>{ console.log('Running App useEffect...'); const authListener = firebase.auth().onAuthStateChanged( (authUser) => { console.log(authUser); console.log(authUser.uid); if(authUser) { setAuthUser(authUser); setAuthWasListened(true); } else { setAuthUser(null); setAuthWasListened(true); } } ); return authListener; // THIS MUST BE A FUNCTION, AND NOT A FUNCTION CALL },[]);
加載 React 應(yīng)用程序時如何設(shè)置 firebase auth onAuthState
慕慕森
2021-06-29 17:01:19