我正在使用我的useAuth鉤子authContext，以便我可以使用鉤子為我的組件設定全域狀態。
'/'現在，如果用戶未登錄，我將嘗試導航到該頁面，并在用戶被重定向后requireLoginAlert在頁面中向用戶顯示。'/'但是，當我嘗試將setRequireLoginAlert(true)函式包含在requireAuth.js.
Warning: Cannot update a component (`AuthProvider`) while rendering a different component (`RequireAuth`). To locate the bad setState() call inside `RequireAuth`
我的requireAuth.js：
const RequireAuth = () => {
const { auth, setRequireLoginAlert } = useAuth();
const location = useLocation();
return (
auth?.user
? <Outlet />
: <Navigate to='/' state={{ from: location }} replace />
&& setRequireLoginAlert(true)
);
};
export default RequireAuth;
我的AuthContext.js
const AuthContext = createContext({});
export const AuthProvider = ({ children }) => {
const [auth, setAuth] = useState({});
const [requireLoginAlert, setRequireLoginAlert] = useState(false);
return (
<AuthContext.Provider value={{ auth, setAuth, requireLoginAlert, setRequireLoginAlert }}>
{children}
</AuthContext.Provider>
);
};
export default AuthContext;
我嘗試在更改時使用useEffect顯示警報location，但是這樣一來，每當我轉到其他頁面時，警報就會不斷彈出，這并不理想。requireLoginAlert在用戶被正確重定向后，我需要一個觸發器來更改狀態。
如果您有任何想法，請隨時發表評論。非常感謝。
uj5u.com熱心網友回復：
我認為你在使用 useEffect 方法方面做得很好。
實際上，您已經使用了依賴項陣列中的位置，但您還需要根據當前頁面包含一個條件，以便requireLoginAlert每次都不會呼叫
您是否嘗試過類似以下代碼的內容？
useEffect(
() => auth?.user && location === "/" && setRequireLoginAlert(true),
[auth?.user, location]
);轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/476437.html
標籤：javascript 反应 前端 条件语句
上一篇：每隔幾秒旋轉一次物件