React useEffect() not working for Logout as expected

user_9963357 0
Viewed 1320

I am trying to implement a Login and Logout functionality.

Everything is working fine, but when I click Logout, I get a blank screen until I refresh the page instead of Login component.

So far, I have tried this:

function App() {
  
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [user, setUser] = useState()

  const handleLogout = () => {
    setUser({});
    setUsername("");
    setPassword("");
    localStorage.clear();
  };

  const handleSubmit = async e => {
    e.preventDefault();
    const user = { username, password };

    const response = await axios.post(
      "http://<ip-address>/api-token-auth/",
      user
    );

    setUser(response.data.token)

    localStorage.setItem('user', response.data.token)
    
  };

  useEffect(() => {
    const loggedInUser = localStorage.getItem("user");
    if (loggedInUser) {
      const foundUser = (loggedInUser);
      setUser(foundUser);
    }
  }, []);

  if (user) {
    return (
      <Router>
      
      <Navigation
        logout={handleLogout}
        user = {user}
      />
      <Switch>
          <Route exact path="/" component={PermissionApply}/>              
      </Switch>
      
    </Router>
    )
  }


  return (
    
    <Login
    setUsername={setUsername}
    setPassword={setPassword}
    handleSubmit={handleSubmit}
    />
    
  );
}

And my Navigation component:

<a className="nav-link float-right" onClick={props.logout}>Log Out</a>

Any help on why this is happening and how to fix it would be constructive.

reactjs javascript
1 Answers

Your useEffect is running once when the component is loaded because of the []. If you watch for state changes on user, then it should work properly.

 useEffect(() => {
    const loggedInUser = localStorage.getItem("user");
    if (loggedInUser) {
      const foundUser = (loggedInUser);
      setUser(foundUser);
    }
  }, [user]);

Also, in the handleLogout() you are setting the user state to an empty dictionary instead of null.

const handleLogout = () => {
    setUser(); // This ensures that the user state is null
    setUsername("");
    setPassword("");
    localStorage.clear();
  };
user_145212570
Related