react项目ResizeObserver loop completed with undelivered notifications.

### React 中解决 `ResizeObserver loop completed with undelivered notifications` 报错 在 React 项目中遇到 `ResizeObserver loop completed with undelivered notifications` 错误时，可以通过多种方式进行修复。以下是几种常见的解决方案： #### 方法一：通过重写 `ResizeObserver` 可以在项目的入口文件（如 `index.js` 或 `main.js`）中覆盖默认的 `ResizeObserver` 实现，使用防抖技术来减少频繁的通知调用。 ```javascript const debounce = (fn, delay) => { let timer; return (...args) => { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn(...args); }, delay); }; }; const _ResizeObserver = window.ResizeObserver; window.ResizeObserver = class ResizeObserver extends _ResizeObserver { constructor(callback) { super(debounce(callback, 200)); // 设置延迟时间为 200ms } }; ``` 此方法适用于大多数场景，并能有效缓解因高频通知引发的问题[^1]。 --- #### 方法二：隐藏 Webpack Dev Server 覆盖层 如果该问题是由于开发环境中的 Webpack Dev Server 导致，则可以直接禁用其错误提示覆盖层。在全局样式文件（如 `index.css` 或 `global.css`）中添加以下代码即可实现： ```css #webpack-dev-server-client-overlay { display: none !important; } ``` 这种方法不会真正解决问题，而是屏蔽了错误提示，适合临时测试阶段使用[^3]。 --- #### 方法三：调整 Ant Design 组件行为 当使用 Ant Design 的 Table 等组件时，可能会因为内部逻辑触发上述问题。此时可尝试优化表格渲染性能或更新至最新版本以获取官方修复支持。例如，在数据加载完成后手动控制 DOM 更新频率，从而降低对 `ResizeObserver` 的依赖程度[^4]。 --- #### 方法四：限制回调执行次数 如果不希望修改原生 API 定义，也可以采用限流策略限制每次事件触发后的实际响应数量。具体做法如下所示： ```javascript function throttle(fn, limit) { let lastCall = 0; return function(...args) { const now = new Date().getTime(); if (now - lastCall >= limit) { lastCall = now; return fn.apply(this, args); } }; } // 使用节流函数包裹原有回调逻辑 new ResizeObserver(throttle((entries) => { entries.forEach(entry => console.log('Resized:', entry)); }, 500)).observe(document.querySelector('#target')); ``` 这种方式无需改动全局配置，仅针对特定需求定制化适配[^5]。 --- ### 总结 以上四种方式分别从不同角度出发解决了 `ResizeObserver loop completed with undelivered notifications` 这类异常现象的发生机制及其应对措施。开发者应根据实际情况灵活选用最合适的手段加以实施。