React中如何为调用外部异步函数的useEffect编写清理逻辑？

你之前用AbortController编写清理逻辑的思路完全适用于当前场景，核心只需要做两点调整：将abort信号透传到helpers文件的fetch请求中，同时增加挂载状态标记避免组件卸载后触发状态更新。

第一步：修改helpers.js工具函数，支持接收中止信号 #

给passEvents增加可选的signal入参，直接透传给内部的fetch配置，同时在catch逻辑中忽略主动abort触发的错误即可：

const passEvents = async (e, signal) => {
  try {
    const response = await fetch(`/api/misc/holidays`, {
      credentials: 'same-origin',
      signal, // 透传中止信号
    });
    const jsonData = await response.json();
    const holidays = jsonData.map((x) => x.date.split('T')[0]); // 提取节假日日期
    return getEvents(e, holidays); // 生成过滤后的事件
  } catch (err) {
    // 主动取消请求触发的错误不需要打印日志
    if (err.name !== 'AbortError') {
      console.error(err.message);
    }
  }
};

第二步：修改Events.js中的useEffect逻辑 #

在effect内部顶层创建AbortController实例和挂载标记，调用passEvents时传入signal，状态更新前先判断组件是否还处于挂载状态，最后在清理函数中执行abort、更新挂载标记：

useEffect(() => {
  const controller = new AbortController();
  let isMounted = true;

  const getGroupEvents = async () => {
    // 分组事件为空时直接更新为用户自有事件
    if (groupEvents.length === 0) {
      if (isMounted) setEvents(userEvents);
      return;
    }

    const passed = await passEvents(groupEvents, controller.signal);
    // 组件已卸载则终止后续状态更新
    if (!isMounted) return;

    setEvents(passed ? passed.concat(userEvents) : userEvents);
  };

  getGroupEvents();

  // 统一返回清理函数
  return () => {
    isMounted = false;
    controller.abort();
  };
}, [groupEvents, userEvents]);

关键注意点 #

• 透传AbortSignal可以直接取消未完成的节假日接口请求，避免不必要的网络开销
• 增加isMounted标记是兜底逻辑：哪怕请求已经在返回途中、abort来不及拦截，也能阻止组件卸载后调用setEvents触发内存泄漏警告
• 原逻辑中if (groupEvents.length > 0)的判断移到异步函数内部，可以覆盖groupEvents为空时的状态更新场景，避免状态不一致
• 不要把controller实例放到条件判断内部创建，否则当条件不满足时清理函数拿不到controller实例，会导致清理逻辑失效

小提示：AbortController不仅可以取消fetch请求，也可以通过判断signal状态中止后续的同步计算逻辑，如果getEvents是计算量很大的函数，也可以在计算过程中判断signal.aborted提前终止，减少性能损耗。

内容的提问来源于stack exchange，提问作者Vince Frost