在 ReactJS 中显示用户个人资料之前，导航栏中显示注册和登录按钮闪烁/闪烁

Question

我有一个导航栏组件，将显示登录和注册按钮，但如果用户登录，它将显示用户名。用户数据从API获取，必须有

accessToken

才能获取用户数据。因此，如果用户登录，

accessToken

将在 localStorage 中设置，并有权获取将在导航栏中显示的用户数据。 问题是，已经登录的用户如果刷新页面，将出现登录和注册按钮闪烁，该页面将显示一秒钟，然后显示用户名。当用户刷新页面时，如何阻止它显示登录和注册按钮的闪烁？

这是代码：

Navbar.jsx

import { Link, NavLink } from "react-router-dom";
import { useUserLoginDetailQuery } from "../pages/user/userApiSlice";

export const Navbar = () => {
  const { data: user, isLoading} = useUserLoginDetailQuery();


  return (
    <nav className="w-full h-28 flex flex-row px-16 items-center gap-28 border-b-blue-700 border-b-2">
      <Link to="/">
        <img src="/logo.svg" className="h-14" />
      </Link>
      <div className="flex flex-row gap-8">
        {user ? (
            <>
            {user.nama}
            </>
        ) : (
          <>
            <Link
              to="/login"
              className="bg-none border-2 px-4 flex items-center h-10 text-blue-500 font-bold rounded-lg border-blue-500 hover:bg-blue-500 hover:text-white ease-in-out duration-200"
            >
              Login
            </Link>
            <Link
              to="/register"
              className="bg-blue-500 px-4 flex items-center h-10 border-2 border-blue-500 text-white font-bold rounded-lg  hover:bg-white hover:text-blue-500 ease-in-out duration-200"
            >
              Register
            </Link>
          </>
        )}
      </div>
    </nav>
  );
};

有人可以帮我吗？我不知道哪个是解决这个问题的正确方法。

Answer 1

我面临着类似的问题，所以你可以观看我的代码，我会解释我做了什么。 就像你正在使用

useUserLoginDetailQuery

我正在使用

useFirebase

自定义挂钩

const [isLoggedIn, setIsloggedIn] = useState();
  const firebase = useFirebase();
  useEffect(() => {
    (async () => {
      try {
        const user = await firebase?.user;
        if (user) {
          setIsloggedIn(true);
        } else if (user === undefined) {
          setIsloggedIn(false);
        }
      } catch (error) {
        console.error("Error in auth", error);
      }
    })();
  }, [firebase?.user]);

所以发生了什么，

isLoggedIn

默认为 false，因此当组件首次渲染时它为 false 并且出现登录按钮，然后当我获取用户信息时

isLoggedIn

设置为 true。 所以为了解决这个问题，我用空状态初始化了

isLoggedIn

，然后我修改了我的钩子以在找不到用户时发送未定义

onAuthStateChanged(auth, (user) => {
      if (user) {
        setUser(user?.email);
      } else {
        setUser(undefined);
      }

然后有条件地检查用户是否为

undefined/ not found

（当未找到用户时我发送

undefined

）

        <>
          // as per first render the isLoggedIn will be null
          {isLoggedIn !== undefined ? (
           // on re-render of the component we will set isLoggedIn accordingly.
            isLoggedIn ? (
              <div></div>
            ) : (
              <NavLink to="/login">
                <li className="nav-item ">Login</li>
              </NavLink>
            )
          ) : (
            <div>Loading...</div>
          )}
        </>

我希望你能理解我一直在努力实现的目标。随时欢迎任何改进建议。

我的仓库链接Github