渲染不同组件时无法更新组件

Question

我正在使用我的 authContext 的 useAuth 挂钩，这样我就可以使用挂钩为我的组件设置全局状态。

现在，如果用户未登录，我将尝试导航到 '/' 页面，并在 '/' 页面之后向用户显示 requireLoginAlert用户被重定向。但是，当我尝试在 requireAuth.js.

中包含 setRequireLoginAlert(true) 函数时出现以下错误

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 状态。

如果您有任何想法，请随时发表评论。非常感谢。

Answer 1

我认为您使用 useEffect 方法的方法很好。

确实你已经使用了dependencies数组中的位置，但是你还需要包含一个基于当前页面的条件，这样requireLoginAlert就不会每次都被调用

你试过类似下面的代码吗？

useEffect(
  () => auth?.user && location === "/" && setRequireLoginAlert(true),
  [auth?.user, location]
);

渲染不同组件时无法更新组件

Can not update a component while rendering a different component

javascript

reactjs

frontend

conditional-statements