useEffect中声明的Interval未清除导致iframe重复加载问题

核心问题 #

你遇到的情况是useEffect的依赖配置错误或定时器清除逻辑失效，导致即便loaded状态变为true，定时器也没被正确销毁，持续每5秒触发src重置请求，进而反复刷新iframe。

具体修复步骤 #

1. 给useEffect加上正确的依赖项
   必须把loaded加入依赖数组，这样当loaded状态变化时，useEffect才会重新执行，进而在加载完成时清除定时器。示例代码：

   useEffect(() => {
     let intervalId;
     // 未加载时启动定时器
     if (!loaded) {
       intervalId = setInterval(() => {
         // 加时间戳避免缓存，确保每次请求都能触发重载
         setIframeSrc(`${yourPdfUrl}?t=${Date.now()}`);
       }, 5000);
     }
   
     // 组件卸载或依赖变化时强制清除定时器
     return () => {
       if (intervalId) clearInterval(intervalId);
     };
   }, [loaded, yourPdfUrl]); // 依赖数组必须包含loaded和pdf地址
   

2. 确保iframe加载状态更新准确
   要在iframe的onLoad事件里正确标记加载完成：

   <iframe
     src={iframeSrc}
     onLoad={() => setLoaded(true)}
     onError={() => {
       // 加载失败时不要标记为已加载，避免定时器直接被清除
       console.log("PDF加载失败，将尝试重新加载");
     }}
     // 其他必要属性
   />
   

3. 优化定时器内的判断逻辑
   为了防止状态更新延迟导致的误触发，在定时器内部再加一层loaded判断：

   intervalId = setInterval(() => {
     if (!loaded) {
       setIframeSrc(`${yourPdfUrl}?t=${Date.now()}`);
     }
   }, 5000);
   

额外注意点 #

• 跨域问题：如果docs.google.com的iframe存在跨域限制，onLoad可能无法正常触发，导致loaded一直为false，定时器持续运行。这种情况可以考虑用第三方PDF预览库替代iframe方案。
• 缓存问题：重复设置相同的src浏览器可能不会触发重载，所以一定要加时间戳参数强制刷新请求。

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