React快速切换页面后axios调用setState报错求助

嘿，我刚看到你的问题，这种情况其实挺常见的，尤其是React新手容易踩这个坑。我来给你拆解一下原因，再给你几个靠谱的解决办法：

问题到底出在哪？ #

你以为切回Component A后，还是原来的那个组件实例？其实不是！当你从A切到B时，原来的Component A实例已经被React卸载了，但此时你的axios请求还在pending状态；等你快速切回A，React会创建一个全新的Component A实例并挂载。但之前那个旧实例的请求回调并没有被取消，当响应返回时，回调还是试图给那个已经被卸载的旧实例setState，所以会报错——而你检查的是新实例的挂载状态，自然显示“已挂载”，这就造成了矛盾的现象。

解决方案1：用AbortController取消旧请求（强烈推荐） #

这是React官方最推荐的方式，能从根源上解决问题：当组件卸载时，直接取消对应的axios请求，让旧请求的回调根本不会执行。

代码示例：

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

function ComponentA() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 创建一个AbortController实例
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchData = async () => {
      try {
        // 把signal传给axios，这样就能在需要时取消请求
        const response = await axios.get('/your-api-endpoint', { signal });
        setData(response.data);
      } catch (error) {
        // 如果是请求被取消，不用处理这个错误
        if (!axios.isCancel(error)) {
          console.error('请求失败:', error);
        }
      }
    };

    fetchData();

    // 组件卸载时（切去B的时候），取消请求
    return () => controller.abort();
  }, []);

  return (
    <div>
      {data ? <p>请求结果：{JSON.stringify(data)}</p> : <p>加载中...</p>}
    </div>
  );
}

export default ComponentA;

解决方案2：用挂载状态标记（针对无法取消的请求） #

如果因为某些业务原因不能取消请求，那可以给每个组件实例加个“挂载标记”，确保只有当前活跃的实例才会执行setState：

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

function ComponentA() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 这个标记是当前useEffect闭包独有的，绑定到当前组件实例
    let isCurrentInstanceMounted = true;

    const fetchData = async () => {
      try {
        const response = await axios.get('/your-api-endpoint');
        // 只有当前实例还挂载着，才更新状态
        if (isCurrentInstanceMounted) {
          setData(response.data);
        }
      } catch (error) {
        console.error('请求失败:', error);
      }
    };

    fetchData();

    // 组件卸载时，把标记设为false
    return () => {
      isCurrentInstanceMounted = false;
    };
  }, []);

  return (
    <div>
      {data ? <p>请求结果：{JSON.stringify(data)}</p> : <p>加载中...</p>}
    </div>
  );
}

export default ComponentA;

为什么你之前的挂载检查没用？ #

你之前的检查大概率是在组件的render函数或者其他钩子中做的，但那个检查针对的是新创建的组件实例，而报错的是旧实例的回调。旧实例已经被React清理了，但它的请求回调还留在内存里，当响应回来时，它的setState指向的是那个已经不存在的旧实例，所以才会报错。

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