我的useEffect清理函数为何不执行？

你遇到的核心问题是：useEffect的清理函数仅在组件卸载或依赖项发生变化时才会执行。当前代码中，只有当downloadedFile从有值变为另一个值（或null）时，旧effect的清理函数才会触发。如果downloadedFile在下载后没有被正确更新，或者组件没有因状态变化重新渲染，清理函数就会一直不执行。

下面是几种针对性的解决办法：

方案一：下载后延迟执行清理（不依赖状态变化） #

link.click()触发下载后，浏览器需要短暂时间读取Blob对象，不能立即revoke否则会导致下载失败。可以设置短延迟后直接执行清理逻辑：

useEffect(() => {
  if (!downloadedFile) return;
  const link = document.createElement("a");
  link.href = downloadedFile.file;
  link.setAttribute("download", downloadedFile.filename);
  document.body.appendChild(link);
  link.click();
  console.log("downloaded");

  // 给浏览器留足处理下载的时间，100ms足够大部分场景
  const cleanupTimer = setTimeout(() => {
    console.log("cleaned up");
    link.remove();
    window.URL.revokeObjectURL(downloadedFile.file);
    dispatch(cleanUpAfterDownload());
  }, 100);

  // 组件卸载时清除定时器，避免内存泄漏
  return () => clearTimeout(cleanupTimer);
}, [downloadedFile]);

方案二：确保状态更新触发清理函数 #

检查cleanUpAfterDownload的reducer逻辑，确保它确实将downloadedFile设置为null或其他不同于当前值的状态。同时调整effect逻辑，确保依赖项变化时清理函数必执行：

useEffect(() => {
  let link;
  if (downloadedFile) {
    link = document.createElement("a");
    link.href = downloadedFile.file;
    link.setAttribute("download", downloadedFile.filename);
    document.body.appendChild(link);
    link.click();
    console.log("downloaded");
  }

  // 无论downloadedFile是否有值，都返回清理函数
  return () => {
    if (link) {
      console.log("cleaned up");
      link.remove();
      downloadedFile?.file && window.URL.revokeObjectURL(downloadedFile.file);
      dispatch(cleanUpAfterDownload());
    }
  };
}, [downloadedFile]);

当downloadedFile从有值变为null时，依赖项变化会触发旧effect的清理函数执行。

方案三：用Ref保存Blob URL，规避依赖项问题 #

如果downloadedFile的状态逻辑复杂，可以用ref保存需要revoke的URL，确保清理时能正常访问：

const fileUrlRef = useRef(null);

useEffect(() => {
  if (!downloadedFile) return;
  fileUrlRef.current = downloadedFile.file;
  const link = document.createElement("a");
  link.href = downloadedFile.file;
  link.setAttribute("download", downloadedFile.filename);
  document.body.appendChild(link);
  link.click();
  console.log("downloaded");

  return () => {
    console.log("cleaned up");
    link.remove();
    if (fileUrlRef.current) {
      window.URL.revokeObjectURL(fileUrlRef.current);
      fileUrlRef.current = null;
    }
    dispatch(cleanUpAfterDownload());
  };
}, [downloadedFile]);

额外检查项 #

1. 确认cleanUpAfterDownload action确实修改了downloadedFile状态，使其变为null或其他不同值；
2. 检查组件在下载完成后是否保持挂载状态（如果组件立即卸载，清理函数会执行但可能来不及打印日志）。

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