加载React应用时如何设置运行的Firebase auth onAuthStateChanged()侦听器运行?

cbdeveloper

我正在尝试在顶级组件上设置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...

似乎我正在设置侦听器,但起初没有运行,因此它没有获得当前的身份验证状态(该状态为null,因为我什至没有登录表单)。似乎正在等待更改发生。

首先不应该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

  },[]);
道格·史蒂文森

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章