javascript - 如何设置加载 React 应用程序时运行的 firebase auth onAuthStateChanged() 监听器？

Question

我正在尝试在我的顶级组件 App 上设置 Firebase 身份验证监听器，以便通过 React 上下文提供 authUser 对象到所有其他组件。

我目前正在这样做:

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

参见 https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1

Why did we return a function from our effect? This is the optional cleanup mechanism for effects. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other. They’re part of the same effect!

When exactly does React clean up an effect? React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time. We’ll discuss why this helps avoid bugs and how to opt out of this behavior in case it creates performance issues later below.

并查看 Set an authentication state observer and get user data

试试下面的代码。

function App() {
  console.log('Rendering App...');
  const [authUser,setAuthUser] = useState(null);
  const [authWasListened,setAuthWasListened] = useState(false);

  useEffect(()=>{
    console.log('Running App useEffect...');
    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>
  );

}