0

in my React app I am trying to create a protected route such that, if the user is not logged in, they cannot access the homepage; although not included here, when the user logs in correctly, they should be automatically navigated to the homepage. However, this never happens and it seems as if my useState is not actually updating the state.

My server is definitely producing the right response. If the user is logged in, I get a response of {isLoggedIn: true}, and vice versa if not, however the state of res always seems to remain false. Any help would be appreciated since I'm a little lost here.

Protected Routes


import {Outlet, Navigate} from 'react-router-dom';
import { useState, useEffect} from 'react';
import React from 'react';
import axios from 'axios';

const PrivateRoutes = () =>{

    let[res, setRes] = useState(false);

    useEffect(() => {
        const getData = async () => {
            const response = await axios.get("http://localhost:3001/auth", {withCredentials: true});
            setRes(response.data.isLoggedIn); //if I console log response.data.isLoggedIn here, I get my expected value, but res never seems to update to this
        }
        getData();
    },[])


    return(
         res ? <Outlet /> : <Navigate to="/login" />
    )
}

export default PrivateRoutes;
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
IdotEXE
  • 17
  • 5
  • 2
    I doubt React is broken, and I doubt the `res` state isn't having an issue updating. How exactly are you verifying the state update? Is the issue that the initial `res` state matches a verified unauthenticated user status and the `PrivateRoutes` component is prematurely navigating to `"/login"`? Does [this answer](/a/71704109/8690857) help answer your question? – Drew Reese Nov 07 '22 at 17:12
  • I am guessing here. you have an `async` function, and getData() does not have an `await` – D. Seah Nov 07 '22 at 17:17
  • Keep in mind that if you are trying to log the `res` state immediately after the enqueued update that [React state updates are not immediate](https://stackoverflow.com/q/54069253/8690857). – Drew Reese Nov 07 '22 at 17:18
  • So essentially, the initial state is false since the user isn't logged in and, as expected, you cannot navigate to protected routes (such as the homepage). However, when I log in correctly (I can see the server is sending the correct response, since visiting the request URL on localhost:3001/auth sends {isLoggedIn: true}, and when I log the response on my frontend I also get true), although I expect the res state to update to reflect the correct log in, and therefore allowing us to navigate to homepage, it doesn't allow this and redirects me to the login page, since res is still false – IdotEXE Nov 07 '22 at 17:24
  • Update, the provided answer did end up answering my question – IdotEXE Nov 07 '22 at 17:40

1 Answers1

-1

try putting the console.log outside the useEffect, within the scope of the component. if you see 'true' at some point, the problem is with your component tree and your rendering.

Allan Oliveira
  • 1