reactjs - 反应警告超过最大更新深度：firebase-react-hook

Question

目前，我正在尝试检查用户是否已登录我的主页并根据登录状态显示一些不同的组件。

但是，我收到了这个警告：

“超过最大更新深度。当组件在 useEffect 中调用 setState 时，可能会发生这种情况，但 useEffect 要么没有依赖数组，要么每次渲染时其中一个依赖项都发生了变化。”</p>

以下是我在Appshell.js中的代码

import React from "react";
import TopRight from "./TopRight";
import { AppBar, Toolbar } from "@material-ui/core";
import BootstrapButton from "./BootstrapButton";
import { Link } from "react-router-dom";
import { useDocumentData } from "react-firebase-hooks/firestore";
import { useAuthState } from "react-firebase-hooks/auth";
import firebase from "firebase/app";
import SignOut from "./SignOut";

const firestore = firebase.firestore();

function AppShell() {
  ###The following line of code is causing the error###

  const [currentUser] = useAuthState(firebase.auth());

  #####################################################

  const userRef = firestore.collection("Users").doc(currentUser?.uid);
  const [user] = useDocumentData(userRef);

  return (
    <>
      <div className="flex justify-between">
        {currentUser ? <SignOut /> : <TopRight />}
      </div>
      <AppBar elevation={0} position="static" style={{ background: "#EDEDED" }}>
        <Toolbar>
          <Link to="/">
            <BootstrapButton color="default">Home</BootstrapButton>
          </Link>
          <Link to="/opportunities">
            <BootstrapButton color="default">Opportunities</BootstrapButton>
          </Link>
          {user?.Class === "recruiter" ? (
            <Link to="/myposts">
              <BootstrapButton color="default">My Posts</BootstrapButton>
            </Link>
          ) : (
            <Link to="/organisations">
              <BootstrapButton color="default">Organisations</BootstrapButton>
            </Link>
          )}

          <Link to="/about">
            <BootstrapButton color="default">About</BootstrapButton>
          </Link>
        </Toolbar>
      </AppBar>
    </>
  );
}

export default AppShell;

我尝试将代码行const [currentUser] = useAuthState(firebase.auth());放在 useEffect 挂钩中，以便仅在呈现页面时更新，但显然不允许这样做。因此，非常感谢任何摆脱此错误的建议，谢谢！

标签： reactjsfirebase