React中setIsLogged(true)无法触发状态更新问题求助

核心原因1：React状态更新的异步特性 #

你在setIsLogged(true)之后立刻console.log(isLogged)看到的是旧值，这是因为React的useState更新是异步批量处理的，状态不会在调用setter后立刻改变。你看到的“状态始终为false”可能只是即时打印的错觉，而非真的没更新。

验证方法：用useEffect监听isLogged的变化，确认状态是否真的更新：

useEffect(() => {
  console.log('登录状态更新:', isLogged);
}, [isLogged]);

核心原因2：状态未全局持久化 #

如果是跳转后其他组件读取isLogged时显示false，问题在于组件内部的useState状态会随组件卸载而丢失。你已经把access_token存在了localStorage，但没有在组件初始化时同步这个状态。

修复方案：

1. 初始化状态时从localStorage读取：

const [isLogged, setIsLogged] = useState(() => {
  // 初始化时检查本地存储是否有token，有则设为已登录
  return !!localStorage.getItem('accessToken');
});

2. 全局状态管理（可选）：如果多个组件需要用到登录状态，建议用React Context或Redux统一管理，避免每个组件单独处理状态同步问题。

额外优化：确保状态更新后再跳转（可选） #

虽然navigate是路由跳转，组件会卸载，但如果需要在当前组件依赖更新后的状态做后续操作，可以用useEffect监听isLogged变化后再跳转：

useEffect(() => {
  if (isLogged) {
    navigate('/dashboard-react');
  }
}, [isLogged, navigate]);

// 然后在handleLogin里只做状态更新，去掉navigate
const handleLogin = async (email, password) => {
  try {
    const { access_token } = await login(email, password);
    const userDetails = await getUser(access_token);
    setUser(userDetails);
    setError(null);
    localStorage.setItem('accessToken', access_token);
    setIsLogged(true);
  } catch (error) {
    setError(error.response.data.error);
  }
};

内容的提问来源于stack exchange，提问作者ashutosh jak