React项目中异步拉取API的for循环如何在切换选中影片时中断

你遇到的是典型的异步任务竞态问题，由于React状态更新是批量异步执行的，所以无法通过selectedFilm状态做实时校验，下面提供两种可行方案：

方案1：使用useRef做失效标记（轻量易实现） #

核心思路是用useRef存储当前最新选中的影片标识，ref的读写都是同步生效的，不存在状态更新延迟问题。

代码修改如下： #

1. 新增ref存储当前生效的影片：

// 新增ref，不需要触发渲染，仅做标记用
const activeFilmRef = useRef(null);
const [selectedFilm, setSelectedFilm] = useState({})

2. 修改filmSelected函数，先同步更新ref：

const filmSelected = async (film) => {
  // 同步更新ref为最新选中的影片，立即生效
  activeFilmRef.current = film;
  setSelectedFilm(film)
  const c = await fetchCharacters(film.characters, film);
  // 最终提交结果前再次校验，避免旧请求返回后覆盖新数据
  if (activeFilmRef.current === film) {
    setCharacters(c);
  }
};

3. 修改fetchCharacters函数，每次循环前校验是否需要中断：

const fetchCharacters = async (l, f) => {
  let c = 0;
  let characters = [];
  for (let i = 0; i < l.length; i++) {
    // 只要当前处理的影片不是最新的，直接终止旧循环
    if (activeFilmRef.current !== f) {
      return [];
    }
    try {
      const charFetch = await fetch(l[i]);
      const response = await charFetch.json();
      characters.push(response);
      c++;
      setCount(c);
    } catch (e) {
      return e;
    }
  }
  return characters;
};

方案2：使用AbortController（可取消未完成的网络请求，更彻底） #

如果需要同时取消未完成的网络请求、节省带宽，可以搭配浏览器原生的AbortController实现，不仅能终止循环，还能直接中断pending状态的fetch请求。

代码修改如下： #

1. 新增ref存储AbortController实例：

const abortControllerRef = useRef(null);
const [selectedFilm, setSelectedFilm] = useState({})

2. 修改filmSelected函数，切换影片时先终止上一次的所有请求：

const filmSelected = async (film) => {
  // 切换影片时先终止上一次未完成的请求
  if (abortControllerRef.current) {
    abortControllerRef.current.abort();
  }
  // 为本次请求新建AbortController
  const currentController = new AbortController();
  abortControllerRef.current = currentController;

  setSelectedFilm(film);
  try {
    const c = await fetchCharacters(film.characters, film, currentController.signal);
    // 仅未被中断的请求可以更新状态
    if (!currentController.signal.aborted) {
      setCharacters(c);
    }
  } catch (e) {
    // 忽略请求中断产生的报错
    if (e.name !== 'AbortError') {
      console.error('拉取角色信息失败:', e);
    }
  }
};

3. 修改fetchCharacters函数，传入signal终止请求和循环：

const fetchCharacters = async (l, f, signal) => {
  let c = 0;
  let characters = [];
  for (let i = 0; i < l.length; i++) {
    // 检测到请求已被中断直接退出循环
    if (signal.aborted) {
      return [];
    }
    try {
      // 把signal传给fetch，支持直接中断网络请求
      const charFetch = await fetch(l[i], { signal });
      const response = await charFetch.json();
      characters.push(response);
      c++;
      setCount(c);
    } catch (e) {
      if (e.name === 'AbortError') {
        return [];
      }
      return e;
    }
  }
  return characters;
};

注意事项 #

两种方案都可以解决你的问题，轻量场景选方案1即可，如果项目请求量较大推荐选方案2。不要依赖React组件状态做异步任务的实时校验，状态更新的异步特性会导致读取到旧值，useRef是存储这类全局标记的最佳选择。

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