目前,我正在尝试检查用户是否已登录我的主页并根据登录状态显示一些不同的组件。
但是,我收到此警告:
<块引用>“已超出最大更新深度。当组件在 useEffect 中调用 setState 时会发生这种情况,但 useEffect 要么没有依赖项数组,要么每次渲染时依赖项之一发生变化。”
以下是我在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 钩子中,以便仅在呈现页面时更新,但显然这是不允许的。因此,非常感谢任何摆脱此错误的建议,谢谢!