React组件卸载后状态更新报错：AbortController实现无效问题排查

你找的方向是对的（AbortController和挂载标志位），但问题出在具体的实现细节上——你的错误捕获没有覆盖到fetch中止的场景，而且异步回调里没校验组件是否还处于挂载状态。咱们一步步来修复：

1. 用async/await重构fetchData，让try/catch能捕获中止错误 #

原来的代码里，try只包裹了fetch调用本身，但.then()的回调是独立的异步逻辑。当fetch被中止时会抛出错误，但这个错误不会被外层的catch捕获（因为Promise链的错误没有被正确处理）。改用async/await可以让整个异步流程都处于try/catch的覆盖范围内。

2. 添加useRef跟踪组件挂载状态 #

即使AbortController正常工作，也可能出现“请求响应已经返回，但组件刚好在这时候卸载”的时间差，这时候setMovieData还是会执行。所以我们加一个useRef来标记组件是否还挂载，确保只有挂载时才更新状态。

修改后的完整代码：

// randomBackground.tsx
import { useState, useEffect, useRef } from 'react';

const RandomBackground = () => {
  const [movieData, setMovieData] = useState<IMovie[]>([]);
  const isMounted = useRef(true); // 用来跟踪组件是否还挂载

  useEffect(() => {
    const abortCtrl = new AbortController();
    const opts = { signal: abortCtrl.signal };

    const fetchData = async () => {
      try {
        const response = await fetch(baseurl + apikey + rest, opts);
        const data = await response.json();
        
        // 只有组件还挂载时才更新状态
        if (isMounted.current) {
          setMovieData(data.results);
        }
      } catch (e) {
        // 忽略AbortError（这是我们主动中止请求的正常情况）
        if (!(e instanceof DOMException && e.name === 'AbortError')) {
          console.error('获取电影数据失败:', e);
        }
      }
    };

    fetchData();

    // 清理函数：标记组件已卸载，并中止未完成的请求
    return () => {
      isMounted.current = false;
      abortCtrl.abort();
    };
  }, []);

  // 你的组件渲染逻辑...
};

为什么原来的方案没生效？ #

• 错误捕获不完整：你原来的try/catch只能捕获fetch调用时的同步错误，无法捕获Promise链中（比如.then()回调里）的错误，包括请求被中止时抛出的AbortError。
• 缺少挂载状态校验：即使请求没有被中止，也可能在响应返回的瞬间组件刚好被卸载，这时候setMovieData还是会执行，触发警告。

现在这个版本同时用了AbortController中止未完成的请求，又用isMounted Ref做了双重校验，就能彻底解决这个警告了。

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