如何清理useEffect的axios请求 解决React未挂载组件状态更新警告

这个提示触发的本质是：组件挂载后发出的axios请求，尚未等待接口返回结果，组件就已经被卸载（比如路由跳转、父组件条件渲染移除当前组件）。等请求异步返回时，代码依然会执行setAppState更新已经不存在的组件状态——操作本身是无效的，且因为保留了异步回调的引用没有释放，最终形成内存泄漏。
你之前尝试把setAppState、状态对象加入依赖数组没有解决问题，是因为依赖数组的作用是控制副作用重新执行的时机，根本无法解决「组件卸载时仍有未完成异步任务」的核心矛盾，自然消不掉警告。

方案1：通用标记位控制（无版本依赖，兼容性最强） #

通过在副作用内部定义一个状态标记，组件卸载时通过清理函数把标记置为已卸载，请求返回时先判断标记，仅在组件仍存在时执行状态更新。
同时需要先修复原代码里容易踩的隐藏坑：不要在组件函数内部定义高阶组件的返回值——否则每次渲染都会生成全新的组件引用，触发子树反复卸载挂载，反而会放大内存泄漏的概率。
修正后的代码：

// 把高阶组件生成逻辑移到组件外部，避免重复生成组件引用
const ListLoading = LoadingComponent(Demo);

export default function GetDemo() {
  const [appState, setAppState] = useState({
    loading: true,
    posts: null,
  });

  useEffect(() => {
    // 标记组件是否处于挂载状态
    let isMounted = true;

    axiosInstance.get('demo/all/').then((res) => {
      // 组件已卸载则直接跳过状态更新
      if (!isMounted) return;
      const allPosts = res.data;
      setAppState({ loading: false, posts: allPosts });
    });

    // 组件卸载时执行清理，将标记置为已卸载
    return () => {
      isMounted = false;
    };
  }, []);

  return (
    <ListLoading isLoading={appState.loading} buckets={appState.posts} />
  );
}

方案2：Axios内置请求中断（性能最优，彻底释放异步任务） #

如果使用Axios 0.22及以上版本，可以直接用原生的AbortController从根源上中断未完成的网络请求——不仅能避免无效的状态更新，还能直接终止挂起的网络请求，完全不留残留的异步任务，是当前官方推荐的写法。
对应实现代码：

const ListLoading = LoadingComponent(Demo);

export default function GetDemo() {
  const [appState, setAppState] = useState({
    loading: true,
    posts: null,
  });

  useEffect(() => {
    // 初始化请求中断控制器
    const abortController = new AbortController();

    axiosInstance.get('demo/all/', {
      // 将中断信号绑定到当前请求
      signal: abortController.signal
    }).then((res) => {
      const allPosts = res.data;
      setAppState({ loading: false, posts: allPosts });
    }).catch((err) => {
      // 主动中断的请求直接跳过错误处理
      if (axios.isCancel(err)) return;
      // 其他真实接口异常的处理逻辑
    });

    // 组件卸载时主动中断未完成的请求
    return () => {
      abortController.abort();
    };
  }, []);

  return (
    <ListLoading isLoading={appState.loading} buckets={appState.posts} />
  );
}

• setAppState 是React通过useState返回的状态更新函数，引用在组件整个生命周期内是完全稳定的，根本不需要加入依赖数组，加了也不会改变副作用的执行逻辑，完全无法解决警告问题。
• 如果把appState本身加入依赖数组，反而会引入新bug：每次appState更新都会触发useEffect重新执行，导致接口被反复、重复请求。
• 这个场景下空依赖数组[]的写法是完全正确的：这个副作用的目标就是「组件挂载后发起一次初始数据请求」，没有需要追踪的外部响应式依赖。

额外提醒：不要在组件函数体内生成高阶组件实例，这类逻辑必须移到组件定义的外部，否则会造成子组件的无意义重复挂载，额外增加触发警告的概率。

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