React 18提交编辑表单出现ResizeObserver未送达通知错误求助

API 探路者

2026-6-20

解决ResizeObserver循环错误（仅编辑表单提交时出现）

针对你遇到的ResizeObserver loop completed with undelivered notifications错误，结合场景（仅编辑表单触发、未手动使用ResizeObserver、React18、部分系统出现），给出以下排查和解决方向：

排查第三方依赖的隐性使用
你自己没写ResizeObserver，但常用的UI组件库（如Ant Design、Material UI）、表单库（如React Hook Form、Formik）或者表格类组件大概率内部用到了它。对比新增和编辑表单的组件差异——比如编辑表单是否有带自适应布局的输入组件、动态表格、弹窗嵌套等，这些组件在提交表单触发卸载/重绘时，可能触发了未正确处理的ResizeObserver逻辑。

临时抑制不影响功能的错误
如果这个错误不影响业务流程，可全局添加错误过滤，避免日志污染：

window.addEventListener('error', (e) => {
  if (e.message.includes('ResizeObserver loop completed with undelivered notifications')) {
    e.stopImmediatePropagation();
    e.preventDefault();
  }
});

注意：这是临时方案，优先找根源问题。

检查React18 Strict Mode的影响
React18的严格模式会触发组件双重渲染，部分旧浏览器下，重复的ResizeObserver监听会抛出这个循环错误。你可以临时关闭Strict Mode测试错误是否消失，如果是，建议检查编辑表单内的组件是否有重复注册监听的逻辑，或升级依赖库到适配React18的版本。
确保组件卸载时清理监听
部分第三方组件可能存在未正确清理ResizeObserver实例的问题，编辑表单提交后组件卸载时，残留的监听会导致循环报错。尝试升级用到的组件库到最新稳定版，或者手动封装组件，在useEffect的清理函数中移除监听（如果是自定义组件的话）。
优化表单提交后的DOM操作
编辑表单提交后可能有更多DOM更新（如重置表单、隐藏弹窗、回显数据），频繁的尺寸变化触发了ResizeObserver的多次回调。可以尝试延迟这些操作（用setTimeout包裹），或合并DOM更新，减少ResizeObserver的触发频率。

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