加载 React 应用程序时如何设置 firebase auth onAuthState

Question

我正在尝试在我的顶级组件上设置Firebase 身份验证侦听器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...似乎我正在设置侦听器但它一开始没有运行，因此它没有获得当前的身份验证状态（它是空的，因为我什至还没有登录表单）。似乎在等待改变的发生。不应该首先authListener获取当前authUser状态，然后再听更改吗？我究竟做错了什么？更新我已经发现我做错了什么。本useEffect应该返回一个函数来清除听众unmount，而不是一个函数调用，因为我想上面做。所以我的听众从来没有被设置过。这现在按预期工作：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  },[]);

Answer 1

听众不是立即的。从第一次加载页面开始，状态更改可能需要一些时间。如果您想立即检查用户是否已登录，您可以使用currentUser，但同样，更新可能需要一些时间，因此侦听器是更好的选择。