如何在React的useEffect中让异步函数返回正确的清理函数？

在React里，我们通常这样在useEffect中调用异步函数：

useEffect(() => {
  const fetchData = async () => {
    // 执行异步操作
  };
  fetchData();
}, []);

但如果需要让这个异步函数返回useEffect的清理函数，直接返回异步函数的调用会报错——因为async函数的返回值是Promise，而useEffect要求清理函数必须是同步函数：

useEffect(() => {
  const fetchData = async () => {
    // 异步操作（比如请求远程数据）
    // 请求失败时添加通知
    return () => {
      // 移除刚才添加的通知
    };
  };
  return fetchData(); // 报错：useEffect清理函数不能是Promise
}, []);

实际场景 #

这个异步函数是用useCallback包裹、定义在useEffect外部的复用函数，负责从远程服务加载数据；请求失败时会添加一条通知，但React严格模式下useEffect会执行两次，因此必须在清理时移除这条通知。但清理函数高度依赖异步操作中创建的通知实例，没法在async函数外定义，同时这个函数要给多个组件复用，也不能挪到useEffect内部。

解决方案 #

我们可以让异步函数返回清理函数，再在useEffect中通过Promise的then方法获取并保存这个清理函数，最后在useEffect的清理阶段执行它：

1. 改造复用的异步函数

// 外部复用的异步函数，用useCallback包裹
const fetchData = useCallback(async () => {
  // 初始化空的清理函数
  let cleanup = () => {};

  try {
    const response = await fetch('/api/data');
    // 处理请求成功的逻辑
  } catch (error) {
    // 请求失败，添加通知并记录通知ID
    const notificationId = showErrorNotification('数据加载失败');
    // 定义针对该通知的清理函数
    cleanup = () => {
      removeNotification(notificationId);
    };
  }

  // 返回清理函数
  return cleanup;
}, [showErrorNotification, removeNotification]);

2. 在useEffect中使用并处理清理

useEffect(() => {
  let cleanupFn = () => {};
  // 标记组件是否已挂载，避免竞态问题
  let isMounted = true;

  // 调用异步函数，获取返回的清理函数
  fetchData().then((fn) => {
    if (isMounted) {
      cleanupFn = fn;
    }
  });

  // useEffect的清理逻辑：执行异步函数返回的清理操作
  return () => {
    isMounted = false;
    cleanupFn();
  };
}, [fetchData]);

原理说明 #

async函数执行后返回的Promise会最终resolve出我们定义的清理函数，在useEffect中通过then接收并保存这个函数。当useEffect触发清理时（比如组件卸载、依赖项更新），就执行保存的清理函数，这样既满足了异步函数复用的需求，又能正确执行依赖异步操作结果的清理逻辑。

内容的提问来源于stack exchange，提问作者Page not found