RecoilJs正在冻结UI

Question

我在我的项目中使用后坐力Js，我只有一个原子

export const currentUserState = atom<User | null>({
  key: "currentUserState",
  default: null,
});

我正在用它

const Startup: React.FC = ({ children }) => {
  const [loading, setLoading] = useState(false);
  const setCurrentUser = useSetRecoilState(currentUserState);
  useEffect(() => {
    setLoading(true);
    app.auth().onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });
  }, [setCurrentUser]);
  if (loading) return <div>loading</div>;
  return <>{children}</>;
};

export default Startup;

这个组件被放置在

ReactDOM.render(
  <RecoilRoot>
    <BrowserRouter>
        <Startup>
          <App />
        </Startup>
    </BrowserRouter>
  </RecoilRoot>,
  document.getElementById("root")
);

我试图在应用程序加载之前获取当前用户信息，这样我就可以跟踪用户是否登录。但是这个应用程序在加载时被卡住了，我在控制台上看到了这个错误。

​

Answer 1

我试图存储firebase用户对象，它包含与当前用户相关的所有信息。在保存用户对象的同时，屏幕冻结反冲可能有两个原因。

1. 用户对象不是JSON对象。
2. 用户对象可能太大。

当我试图保存像id和电子邮件这样的对象的特定信息时，我的问题就解决了。当我只保存了一些具体的信息时，已经没有冰点了。