React前端无法向Express后端发送请求求助

问题场景 #

开发React+Express待办应用时，Postman测试/api/register、/api/dashboard接口功能正常，但前端axios请求未实际发送：

• 后端接口的console.log未触发
• 前端无任何报错，网络面板也看不到请求
• 前端Form组件通过changeUser()能正确设置user状态，相关日志正常输出
• 已配置Vite代理指向http://localhost:3000

核心原因 #

两个useEffect中仅定义了异步箭头函数但未执行，导致axios请求根本没被调用：

1. 获取Dashboard数据的useEffect里，异步函数仅定义未调用
2. 用户注册的useEffect里，同样存在异步函数定义后未执行的问题

修复方案 #

修改App.jsx中的useEffect代码 #

1. 修复Dashboard请求的useEffect

原代码：

useEffect(() => {
    async () => {
      const response = await axios.get('/api/dashboard');
      setUser(response.data);
    }
});

修改后：

useEffect(() => {
    const fetchDashboardData = async () => {
      try {
        const response = await axios.get('/api/dashboard');
        setUser(response.data);
      } catch (err) {
        console.error('获取Dashboard数据失败:', err);
      }
    };
    fetchDashboardData(); // 执行异步函数
}, []); // 添加空依赖数组，仅组件挂载时执行一次

2. 修复用户注册的useEffect

原代码：

useEffect(() => {
    console.log("User Changed");
    if(user) {
      async () => {
        const response = await axios.post('/api/register', user);
        console.log(response.data.registrationSuccessful);
        if(response.data.registrationSuccessful) {
          setUsernameChecks(false);
          toggleSign();
        } else {
          setUsernameChecks(true);
        }
      }
    }
}, [user]);

修改后（补充缺失状态+执行异步函数+错误捕获）：

// 先补充缺失的状态定义
const [usernameChecks, setUsernameChecks] = useState(false);

useEffect(() => {
    console.log("User Changed");
    if(user) {
      const registerUser = async () => {
        try {
          const response = await axios.post('/api/register', user);
          console.log(response.data.registrationSuccessful);
          if(response.data.registrationSuccessful) {
            setUsernameChecks(false);
            toggleSign();
          } else {
            setUsernameChecks(true);
          }
        } catch (err) {
          console.error('注册失败:', err);
          setUsernameChecks(true);
        }
      };
      registerUser(); // 执行异步函数
    }
}, [user, toggleSign]); // 添加必要依赖，避免lint警告

额外优化点 #

• 为useEffect添加正确的依赖数组，避免不必要的重复执行
• 增加错误捕获逻辑，方便排查请求失败的原因
• 补充原代码中缺失的usernameChecks状态定义

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