时间戳

首页 > 解决方案 > 登录 React 页面显示登录页面只有几分之一秒

reactjs - 登录 React 页面显示登录页面只有几分之一秒

问题描述

我是 React/Redux 的新手。我正在尝试在 Youtube ( https://www.youtube.com/watch?v=unr4s3jd9qA ) 中遵循本教程。一切都按照视频中的方式进行。但是，当我以用户身份登录时刷新页面时，登录屏幕会闪烁几分之一秒，然后重定向到主屏幕。这两天我一直在努力寻找解决方案。任何帮助，将不胜感激。

谢谢

标签： reactjsreact-router

解决方案

问题是 auth.onAuthStateChanged 函数是异步的，并且在第一次渲染后运行的 useEffect 中调用。因此，在子组件已经渲染后，您将获得一个 currentUser 对象。我不知道firebase，但你可以尝试的是：

const [currentUser, setCurrentUser] = useState(firebase.auth().currentUser);

但我不认为这firebase.auth().currentUser是同步的，所以 currentUser 仍null处于初始化状态；

接下来，您可以尝试区分“用户状态未知，也就是尚未调用”和“用户未登录”状态，并且如果状态未知，则不要渲染某些内容。这应该有效：

const [currentUser, setCurrentUser] = useState(false);

useEffect(...);

if (currentUser === false) {
  return null;
}

return (...);

如果你不做服务端渲染，你总是会遇到这种问题。看看例如nextjs。这是一个简单的 SSR 解决方案。

推荐阅读