javascript - 未在 react 功能组件中检查空条件

在我的组件中，我想首先检查是否有经过身份验证的用户：

const ReviewRoundOverall = (props) => {

    if (authenticationService.currentUserValue === null)
        history.push('/login');

    const currentUserId = authenticationService.currentUserValue["id"];

    //rest of the code
}

如果我有两个选项卡，并且在其中一个选项卡中选择一个，然后在第二个选项卡中刷新页面，则会收到以下错误


  TypeError：authentication_service_1.default.currentUserValue为null


对于行const currentUserId = authenticationService.currentUserValue["id"];

如果我再次刷新页面，则用户将被正确导航到/login页面。我想知道为什么在第一次刷新if (authenticationService.currentUserValue === null)时不起作用。

另外，我在其中嵌套了所有组件的NavMenu中，具有以下代码：

const NavMenu2 = (props) => {

    if (authenticationService.currentUserValue == null || authenticationService.currentUserValue["id"] == null) {
        authenticationService.logout();
        history.push('/login');
    }


    useEffect(() => {
        if (authenticationService.currentUserValue == null || authenticationService.currentUserValue["id"] == null) {
            authenticationService.logout();
            history.push('/login');
        }

        authenticationService.currentUser.subscribe(x => set_CurrentUser(x));
    }, []);

}

这又不能解决问题。

有什么建议么？

最佳答案

我猜它在那里引发了错误，因为history.push('/login');行是异步发生的，这意味着其余代码将在重定向到登录页面之前运行。

因此，我的建议是执行以下操作：

const ReviewRoundOverall = (props) => {
   if (authenticationService.currentUserValue === null) {
      history.push('/login');
   } else {
      const currentUserId = authenticationService.currentUserValue["id"];

      //rest of the code
   }
}

这样，一旦您具有null的currentUserValue值，就不会收到错误消息。

我希望这有帮助！