React Hook-useState是否有延迟时间？

Question

当我将isLoggedIn与useState一起使用来确认是否已登录时， 并将其传递给->路由器->导航。 它显示“ TypeError：无法读取null的属性'displayName'”

但是，当不使用isLoggedIn时，它将起作用。 我将其替换为布尔值。

为什么会这样？

这是我的代码

在App.js中

function App() {
  const [init, setInit] = useState(false);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userObj, setUserObj] = useState(null);

  useEffect(() => {
    authService.onAuthStateChanged((user) => {
      console.log(user);
      if (user) {
        setIsLoggedIn(true);
        setUserObj({
          displayName: user.displayName,
          uid: user.uid,
          updateProfile: (args) => {
            return user.updateProfile(args);
          },
        });
      } else {
        setIsLoggedIn(false);
        setUserObj(null);
      }
      setInit(true);
    });
  }, []);

    ...

  return (
<>
  {console.log('updated')}
  {init ? (
    <AppRouter
      refreshUser={refreshUser}
      isLoggedIn={isLoggedIn}
      userObj={userObj}
    />
  ) : (
    'Initializing...'
  )}
</>

在Router.js中

const AppRouter = ({refreshUser, isLoggedIn, userObj}) => {
  return (
    <Router>
      {isLoggedIn && <Navigation userObj={userObj}></Navigation>}
    </Router>
  );
};

在Navigation.js中

import React from 'react';
import { Link } from 'react-router-dom';

const Navigation = ({ userObj }) => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/profile">{userObj.displayName} Profile</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;