使用axios与useEffect发起GET请求遇页面加载失效问题

问题现象 #

• 初始代码（useEffect空依赖数组）：页面刷新后specialities为空；修改代码热更新（不刷新页面）时，请求能正常返回预期结果。
• 移除依赖数组后：页面刷新能拿到完整响应，但请求会无限触发。

核心原因 #

1. 空依赖数组的问题：
   大概率是getURL在组件初始渲染时还未获取到正确值（比如依赖路由参数、异步状态或上下文，初始为undefined/空），导致请求发送到了错误的地址，返回空数据。而热更新时组件重新渲染，getURL已经有了正确值，此时请求就能成功。
   另外，setSpecialities是异步更新状态，直接在getData里console.log(specialities)会拿到旧状态，这是React的正常机制，但不是导致数据为空的主要原因。

2. 移除依赖数组的问题：
   React中，不带依赖数组的useEffect会在每次组件渲染后都执行。而setSpecialities会触发组件重新渲染，这样就形成了「渲染→执行useEffect→调用getData→setSpecialities→重新渲染」的无限循环。

修复方案 #

步骤1：确保请求地址有效并正确管理依赖 #

用useCallback缓存请求函数，将getURL加入依赖，同时在请求前判断地址有效性，避免无效请求：

import { useState, useEffect, useCallback } from 'react';
import axios from 'axios';

const YourComponent = () => {
  const [specialities, setSpecialities] = useState([]);
  // 假设getURL是从其他地方获取的，比如路由、状态等
  // const getURL = ... 

  // 用useCallback包裹，仅当getURL变化时重新创建函数
  const getData = useCallback(async () => {
    // 先判断URL是否有效，避免初始时发无效请求
    if (!getURL) return;
    
    try {
      const response = await axios.get(getURL);
      setSpecialities(response.data);
    } catch (err) {
      console.error('获取数据失败:', err);
    }
  }, [getURL]);

  useEffect(() => {
    getData();
  }, [getData]); // 依赖缓存后的getData，确保URL变化时重新请求

  // 要查看最新状态，单独用useEffect监听
  useEffect(() => {
    console.log(specialities, "specialeties are displayed here");
  }, [specialities]);

  return (
    // 你的组件内容
  );
};

步骤2：额外排查点 #

如果getURL是静态常量，那可能是请求本身的缓存或后端问题，可以在请求时添加随机参数禁用缓存：

const response = await axios.get(`${getURL}?t=${Date.now()}`);

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