React Hook报错：无法在已卸载组件中执行setState，求解决方案

嘿，这个问题我太熟了！你遇到的是React里很常见的异步请求竞态问题——当你的getSideAd()异步请求还在pending的时候，组件已经被卸载了，这时候再调用setSideAd去更新状态，React就会抛出那个警告。给你几个靠谱的解决办法，按推荐程度排序：

1. 使用AbortController取消未完成的请求（最推荐） #

这个方法从根源上解决问题：当组件卸载时，直接取消还没完成的请求，这样就不会有后续的setState操作了。现代浏览器都支持这个API，而且很多请求库（比如fetch、axios）都兼容它。

修改你的代码如下：

const SideAd = () => { 
  const [sideAd, setSideAd] = useState([]) 

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

    const query = async () => {
      try {
        // 把signal传给getSideAd，让请求可以被取消
        const res = await getSideAd({ signal });
        Array.isArray(res) && setSideAd(res);
      } catch (error) {
        // 捕获请求被取消的错误，避免控制台报错
        if (error.name !== 'AbortError') {
          console.error('获取侧边广告失败:', error);
        }
      }
    };

    query();

    // 组件卸载时取消请求
    return () => controller.abort();
  }, []) 

  return ( 
    <div className="sideAdComponent"> 
    </div> 
  ) 
}

注意：你需要确保getSideAd函数内部支持接收signal参数并传递给底层的请求（比如fetch的话就是fetch(url, { signal })，axios的话是axios.get(url, { signal })）。

2. 用挂载状态标记判断是否可以更新状态 #

如果你的getSideAd没办法集成AbortController，那可以用一个标记来记录组件是否还挂载着，请求完成后先检查这个标记，再执行setState：

const SideAd = () => { 
  const [sideAd, setSideAd] = useState([]) 
  // 用useRef存挂载状态，因为ref的更新不会触发重渲染
  const isMounted = useRef(true);

  useEffect(() => {
    const query = async () => {
      const res = await getSideAd();
      // 先判断组件是否还挂载，再更新状态
      if (isMounted.current) {
        Array.isArray(res) && setSideAd(res);
      }
    };

    query();

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

  return ( 
    <div className="sideAdComponent"> 
    </div> 
  ) 
}

这个方法的缺点是请求还是会完成，只是不更新状态了，会浪费一点资源，但胜在不需要修改请求函数。

3. 使用局部变量标记请求是否有效（简单临时方案） #

如果你用的是React 18，这个警告在生产环境不会触发，但开发环境看着闹心的话，也可以用局部变量做个简单判断：

const SideAd = () => { 
  const [sideAd, setSideAd] = useState([]) 

  useEffect(() => {
    let isRequestValid = true;

    const query = async () => {
      const res = await getSideAd();
      if (isRequestValid) {
        Array.isArray(res) && setSideAd(res);
      }
    };

    query();

    // 组件卸载时标记请求无效
    return () => {
      isRequestValid = false;
    };
  }, []) 

  return ( 
    <div className="sideAdComponent"> 
    </div> 
  ) 
}

本质和方法2类似，只是用了useEffect内部的局部变量，不需要额外的useRef。

总结一下：优先选方法1，既解决了警告又节省了网络资源；如果没法修改请求函数，就用方法2。

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