React中useEffect执行但无法更新state值的问题求助

核心问题 #

你的代码存在三个关键问题，导致auth状态无法正确更新：

1. axios跨域请求未携带Cookie：浏览器直接请求接口能拿到正确结果，但axios默认不会在跨域请求中携带Cookie，导致后端无法识别登录状态，返回结果始终一致。
2. useEffect缺少依赖控制：无依赖的useEffect会在组件每次渲染后执行，且未在登录/登出状态变化时主动触发验证逻辑。
3. 事件处理函数的闭包陷阱：Handleclick捕获的是组件渲染时的旧auth值，即使后续state更新，旧函数内的auth仍保持初始状态。

修复步骤 #

1. 配置axios携带跨域Cookie #

在请求中添加withCredentials: true，确保跨域时携带后端设置的Cookie：

const verifyAuth = async () => {
    try {
      const res = await axios.get('http://localhost:5000/is_logged_in', {
        withCredentials: true // 新增配置
      });
      return res.data;
    } catch (err) {
      console.log(err);
      return false;
    }
};

同时后端需配合配置CORS：设置Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin需指定前端具体域名（不能用*）。

2. 优化useEffect执行逻辑 #

给useEffect添加空依赖数组，让它仅在组件挂载时执行一次；同时在登录/登出操作后手动触发状态更新：

useEffect(() => {
    (async () => {
      const data = await verifyAuth();
      setAuth(data);
    })();
}, []); // 空依赖数组，仅组件初始化时执行

如果需要在登录成功后立即更新状态，可在登录回调中直接调用验证函数：

// 示例登录函数
const login = async (formData) => {
  const loginRes = await axios.post('http://localhost:5000/login', formData, {
    withCredentials: true
  });
  if (loginRes.data.success) {
    const authStatus = await verifyAuth();
    setAuth(authStatus);
  }
};

3. 解决闭包陷阱 #

两种可选方案：

• 用useRef保存最新状态：

const authRef = useRef();
// 每次auth更新时同步到ref
useEffect(() => {
  authRef.current = auth;
}, [auth]);

const Handleclick = (e) => {
  e.preventDefault();
  // 使用ref中的最新值
  if (authRef.current) {
    console.log('hello');
  } else {
    navigate('/Login');
  }
};

• 点击时直接重新验证：

const Handleclick = async (e) => {
  e.preventDefault();
  const currentAuth = await verifyAuth();
  if (currentAuth) {
    console.log('hello');
  } else {
    navigate('/Login');
  }
};

完整修复代码示例 #

import { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const YourComponent = () => {
  const [auth, setAuth] = useState(false);
  const authRef = useRef(false);
  const navigate = useNavigate();

  const verifyAuth = async () => {
    try {
      const res = await axios.get('http://localhost:5000/is_logged_in', {
        withCredentials: true
      });
      return res.data;
    } catch (err) {
      console.log(err);
      return false;
    }
  };

  useEffect(() => {
    (async () => {
      const data = await verifyAuth();
      setAuth(data);
      authRef.current = data;
    })();
  }, []);

  useEffect(() => {
    authRef.current = auth;
  }, [auth]);

  const Handleclick = (e) => {
    e.preventDefault();
    if (authRef.current) {
      console.log('hello');
    } else {
      navigate('/Login');
    }
  };

  return (
    <button onClick={Handleclick}>测试登录状态</button>
  );
};

export default YourComponent;

内容的提问来源于stack exchange，提问作者Parn Jain