切到别的页面后控制台报 Warning: Can't perform a React state update on an unmounted component,轮询接口还在按秒往外发,Network 面板一直有新请求,关掉标签页之前一直发。日志里能对上时间点,这种反而好排。

setInterval 在 effect 里创建后没有返回清理函数,组件卸载了定时器还在跑,回调继续 setState 并请求接口,警告就这么刷出来的,问题在多页面切换时最明显。这一点先确认清楚,后面就不用反复试。

useEffect(() => {
  const id = setInterval(load, 1000);
  return () => clearInterval(id);
}, []);

「卸载后定时器未清理」确认了原因之后,改动尽量只碰那一处,顺手改的东西后面最容易出问题。线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。

日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。

处理上按这个顺序:effect 里返回 clearInterval 清理函数,别只创建不清理;请求也配上 AbortController 跟着一起取消,别让回调落地;用 ref 标记是否已卸载,回调里做最后一道判断。

结果对不对很好判断,切走页面后 Network 不再出现新请求,卸载警告也跟着消失,内存也会回落。

作者 9823189