React中useEffect内axios请求的useState setter不生效问题

核心原因：闭包捕获旧值 + 状态更新的异步性 #

你看到console.log('done!', isLoggedIn)打印false，并不是状态没更新，而是两个关键因素导致的：

• React的setState是异步操作，调用setIsLoggedIn(res)后，状态不会立即完成变更；
• 你的useEffect依赖是空数组[]，回调函数会捕获组件初始渲染时的isLoggedIn值（即false），即使后续状态更新，这个回调里的isLoggedIn依然是旧值。

实际上setIsLoggedIn(res)已经成功触发了状态更新，只是当前的打印方式无法反映最新状态。

验证状态是否真的更新 #

可以通过以下方式确认状态变化：

1. 在组件的JSX中直接渲染isLoggedIn：

return <div>当前登录状态：{isLoggedIn ? '已登录' : '未登录'}</div>;

2. 新增一个监听isLoggedIn变化的useEffect：

useEffect(() => {
  console.log('登录状态已更新：', isLoggedIn);
}, [isLoggedIn]); // 依赖isLoggedIn，状态变化时触发

代码优化建议 #

1. 改用async/await简化异步逻辑：
   避免嵌套的then回调，让代码结构更清晰：

const [isLoggedIn, setIsLoggedIn] = useState(false);

useEffect(() => {
  const checkAuthStatus = async () => {
    const status = await authAPI.isLoggedIn();
    setIsLoggedIn(status);
  };
  checkAuthStatus();
}, []);

2. 完善API的返回逻辑：
   原isLoggedIn函数在res.data.data存在但没有id的情况下，会默认返回undefined，导致状态被设为undefined。可以修改为强制返回布尔值：

async isLoggedIn() {
    try { 
        const res = await axiosClient.get('user');
        // 用!!将值转为布尔类型，确保始终返回true/false
        return !!res.data.data?.id; 
    } catch(err) {
        return false;
    }
},

内容的提问来源于stack exchange，提问作者Иван Йорданов