1

我正在为 React 组件构建一个守卫。守卫接受 Auth0 JWT 并检查我们的 API 以查看该用户是否存在于我们的数据库中。如果用户确实存在，我们设置并重定向userExists到. 如果用户不存在，我们会调用并将其发送到.true/dashboardpostUser/complete-profile

我遇到的问题是页面正在渲染之前userExists由 fetch 调用正确设置。换句话说，如果我要运行以下代码，日志将按以下顺序读取：

  1. 用户确实存在
  2. 获取调用 1

const SomeGuard: FC<SomeGuardProps> = ({ children }) => {
  const { isAuthenticated } = useAuth();
  const isMountedRef = useIsMountedRef();

  const [userExists, setUserExists] = React.useState(true);

  const getUser = useCallback( async () => {
    try {
      var user_exists;
      fetch(`https://website.com/user`,
        {
          headers: {
            Authorization: `Bearer DFJKS54DUJ6DD.SDF2KJWEF4NKN3JKw4534.DFSKJ5HSKDJ6HF`,
          },
          method: 'GET',
        },
      ).then(response => {
        if (response.status===200) { // USER EXISTS
          console.log("FETCH CALLED 1")
          setUserExists(true);
        }
        else if (response.status===404) { // catch 404 -- USER NOT FOUND
          console.log("FETCH CALLED 2")
          setUserExists(false);
        }
        
        return response.json();
      })
    }
    catch (e) {
      console.error(e);
    }
  }, [isMountedRef]);


  const postUser = useCallback( async () => {
    // assume this works and sends a POST request to our API
    // to create a user
  )}


  useEffect(() => {
    console.log("STEP 1");
    getUser();
  }, [getUser]);



  if (isAuthenticated) {
    if (!userExists) {
      console.log("USER DOES NOT EXIST");
      postUser();
      return <Redirect to="/complete-profile" />;
    }
    else if (userExists) {
      console.log("USER DOES EXIST");
      return <Redirect to="/dashboard" />;
    }
  }

  if (!isAuthenticated) {
    console.log("TRIED TO HIT DASHBOARD WITHOUT BEING LOGGED IN");
    return <Redirect to="/login" />;
  }

  return (
    <>
      {children}
    </>
  );
};


SomeGuard.propTypes = {
  children: PropTypes.node
};

export default SomeGuard;

因为它在fetch调用之前渲染页面，所以我最初设置的值userExists总是决定渲染哪个页面。

请帮忙！我在这里想念什么？如何在页面呈现之前获取fetch更新调用？userExists

4

1 回答 1

1

将 的初始值设置userExists为其他值，例如null，这样您就可以区分未加载页面和已加载和真/已加载和假页面。然后，只渲染孩子一次userExists不为空：

const [userExists, setUserExists] = React.useState(null);

if (isAuthenticated) {
    if (userExists === false) {
        console.log("USER DOES NOT EXIST");
        postUser();
        return <Redirect to="/complete-profile" />;
    }
    else if (userExists === true) {
        console.log("USER DOES EXIST");
        return <Redirect to="/dashboard" />;
    }
}

return userExists === null ? null : children;
于 2021-03-03T22:11:37.877 回答