使用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>
  );
};