reactjs - 使用useEffect时如何等待渲染完成以获取useContext？

Question

我有来自 UserPage 的条件重定向如下图所示为外部认证服务。条件是这样的，如果我的 UserContext不包含用户对象，则页面将被重定向到 https://urltoauthenticate:5000/user用于用户身份验证。第一次运行满足条件，进入认证服务
但是问题是在成功认证后发生的。在身份验证成功的情况下，即使 UserContext提供用户对象，它将在第一次渲染中为空。在这里，我如何等待用户对象可用并准备就绪，以便页面不会再次重定向到身份验证服务？

import React, { useEffect, useContext } from 'react';
import { UserContext } from '../context/UserContext';
export default function UserPage () {
  const user = useContext(UserContext)
  useEffect(() => {
    if(user === null{
      window.location.assign("https://urltoauthenticate:5000/user");
    }
  }, [users]);
  return(
    <div>Hello {user.name}</div>
  )
}

Answer 1

不要等待您的上下文更新，而是在实际更新时重定向到用户页面。为此，您可以在登录页面上放置这样的组件:

export const RedirectIfLoggedIn: React.FC = () => {
  const user = React.useContext(UserContext);
  return user ? <Redirect to={userPath} /> : null;
};

此外，将该重定向保护传递给您的路由:

export const PrivateRoute: React.FC<{
  component: React.FC;
  path: string;
  exact: boolean;
}> = (props) => {
   const user = useContext(UserContext);

  return user ? (
    <Route path={props.path} exact={props.exact} component={props.component} />
  ) : (
    <Redirect to={loginPath} />
  );
};

export const Routes: React.FC = () => {
  return ( 
    <Switch>
      <Route path={loginPath} component={LoginPage} />
      <PrivateRoute path={userPath} component={UserPage} />
      ...
    </Switch>
  );
};