加载 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，但同样，更新可能需要一些时间，因此侦听器是更好的选择。