如何在useEffect中更新状态的react组件中有条件地呈现？

Question

In react I have a private route component that has an isAuthenticated state value that is used to either render the component it is wrapping, or redirect back to my login page.

In order to detect a refresh and perform an authentication check, I added a useEffect hook in the hope that I could check the authentication status, then update isAuthenticated , then either return the component or redirect accordingly.

const PrivateRoute: React.FC<IPrivateRouteProps> = (props) => {
    const dispatch = useDispatch();
    const [isAuthenticated, setIsAuthenticated] = React.useState(false);

    useEffect(() => {
        authService.getIdentity().then(response => {
            if (response) {
                dispatch(signIn(new Identity(response.account)));
                setIsAuthenticated(true);
            } else {
                setIsAuthenticated(false);
            }         
        });
    }, [])

    return isAuthenticated ? (
        <Route {...props} component={props.component} render={undefined} />
    ) : (
        <Redirect to={{ pathname: props.redirectPath }} />
    );
};

Unfortunately this doesn't work and I'm not sure why or how to solve it.

The value of isAuthenticated is always false at the point of rendering and I get the following error in the console....

index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in PrivateRoute (at App.tsx:23)

I can confirm that it does flow through to setIsAuthenticated(true) but this is never reflected in the value of isAuthenticated before rendering.

How can/should I solve this?

Thanks,

Answer 1

I think the issue is that the first time that the code run, it evaluates the render with isAuthenticated false, then the useEffect kicks in and tries to update the value but you have been already redirected to another page.

I will suggest to use another variable to know if the authentication has been validated, and only continue after the authentication has been done.

const PrivateRoute: React.FC<IPrivateRouteProps> = (props) => {
    const dispatch = useDispatch();
    const [loading, setLoading] = React.useState(true);
    const [isAuthenticated, setIsAuthenticated] = React.useState(false);

    useEffect(() => {
        authService.getIdentity().then(response => {
            if (response) {
                dispatch(signIn(new Identity(response.account)));
                setIsAuthenticated(true);
            } else {
                setIsAuthenticated(false);
            }
            setLoading(false);         
        });
    }, [])

    if (isLoading) {
        //we are not ready yet
       return null;
    }

    return isAuthenticated ? (
        <Route {...props} component={props.component} render={undefined} />
    ) : (
        <Redirect to={{ pathname: props.redirectPath }} />
    );
};

Answer 2

As you can see it says Can't perform a React state update on an unmounted component. . To prevent this issue, can you plz try to put <Route> and <Redirect> inside of <React.Fragment> like this?

return isAuthenticated ? (
    <React.Fragment>
        <Route {...props} component={props.component} render={undefined} />
    </React.Fragment>
) : (
    <React.Fragment>
        <Redirect to={{ pathname: props.redirectPath }} />
    </React.Fragment>
);