如何修复‘ResizeObserver loop completed with undelivered notifications’错误

1. 处理ResizeObserver循环触发问题 #

ResizeObserver报错本质是回调中修改元素尺寸导致反复触发，可通过以下方式缓解：

• 给尺寸修改逻辑加requestAnimationFrame延迟执行，避免同步触发监听：

  const observer = new ResizeObserver(entries => {
    requestAnimationFrame(() => {
      // 你的尺寸处理逻辑
    });
  });
  

• 在模态框关闭的回调中，手动销毁ResizeObserver实例：

  const handleModalClose = () => {
    observer?.disconnect();
    // 其他关闭逻辑
  };
  

2. 排查特定页面的差异点 #

既然同一弹窗在其他页面正常，重点对比出错页面的特殊逻辑：

• 检查页面是否使用了React Router v6的新特性（如嵌套路由Outlet、useNavigate的特殊用法），是否在模态框关闭时触发了路由跳转，导致组件卸载时机异常。
• 查看页面中是否有额外的尺寸监听组件（如可视化图表、响应式组件），这类组件的ResizeObserver可能和Bootstrap模态框的DOM操作冲突。

3. 修复Bootstrap v3与React Router v6的兼容问题 #

Bootstrap v3的模态框依赖原生DOM操作，和React的组件生命周期可能冲突：

• 用React状态完全控制模态框的显示/隐藏，不要混用Bootstrap的$('#modal').modal('hide')和React状态，确保关闭时同步更新组件状态。
• 在组件卸载时清理Bootstrap的模态框事件监听：

  useEffect(() => {
    const modalElement = document.getElementById('your-modal-id');
    const handleHidden = () => { /* 自定义逻辑 */ };
    $(modalElement).on('hidden.bs.modal', handleHidden);
    
    return () => {
      $(modalElement).off('hidden.bs.modal', handleHidden);
      $(modalElement).modal('dispose'); // 销毁模态框实例
    };
  }, []);
  

4. 临时抑制开发环境错误（不影响功能时） #

如果报错仅在开发环境出现且不影响功能，可全局捕获该错误避免干扰：

// 仅在开发环境添加
if (process.env.NODE_ENV === 'development') {
  window.addEventListener('error', (event) => {
    if (event.message.includes('ResizeObserver loop limit exceeded')) {
      event.stopImmediatePropagation();
    }
  });
}

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