Null condition is not checked in a react function component

Question

In my components, I want to check initially if there is an authenticated user or not:

const ReviewRoundOverall = (props) => {

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

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

    //rest of the code
}

If I have two tabs, and if I sing out in one them, and then refresh the page in the second tab, I get the following error

TypeError: authentication_service_1.default.currentUserValue is null

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

If I refresh the page again, the user is navigated to /login page without errors. I wonder why in the first refresh if (authenticationService.currentUserValue === null) is not working.

Also, I have the NavMenu in which all components are nested, where I have the following code:

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));
    }, []);

}

This again does not solve the problem.

Any suggestions?

norbitrial · Accepted Answer · 2019-11-07 11:29:08Z

1

I guess it is throwing the error there because the line history.push('/login'); is happening asynchronously which means the rest of the code will run before redirecting to login page.

So my suggestion would be to do the following:

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

      //rest of the code
   }
}

By doing this you won't get the error message once you have null value for currentUserValue.

I hope this helps!

answered Nov 7, 2019 at 11:29

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

renakre Over a year ago

Thanks! this works if I also return something (null in this case).

norbitrial Over a year ago

Great! Happy to help anytime. Please consider accepting as the answer if it solved your problem, thanks!

Collectives™ on Stack Overflow

Null condition is not checked in a react function component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related