react17+antd4使用Table组件发生错误：ResizeObserver loop completed with undelivered notifications

Yjing景

已于 2024-04-14 11:33:08 修改

阅读量2.1k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react Table 报错

于 2024-04-14 11:32:51 首次发布

本文链接：https://blog.csdn.net/weixin_45871977/article/details/137740306

在使用Table组件时出现了如下错误：

在这里插入图片描述

这个错误表明 ResizeObserver 遇到了一个循环通知的问题，这通常发生在 ResizeObserver 的回调函数中执行了会触发自身重新观察的操作，或者是因为某些原因，回调函数的执行被阻塞了，导致通知无法被及时传递和处理。

报错的原因：在页面绘制的时候，页面突然发生调整大小的事件，导致了样式和布局都需要重新评估，这个调整大小导致的布局变化，将延迟到下一帧来绘制。

简单粗暴解决：在报错组件里面，或者全局，添加隐藏这个浮层的样式。

//antd组件内 ResizeObserver loop limit exceeded报错隐藏
#webpack-dev-server-client-overlay {
   
   
  display: none !important;
}

这只是

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Yjing景

关注关注

7
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue使用element-plus的table组件报错ResizeObserver loop completed with undelivered notifications.

JackieDYH的博客

06-11

1822

ERROR报错ResizeObserver loop completed with undelivered notifications.

Vue3 - ResizeObserver loop completed with undelivered notifications（ResizeObserver loop limit excee）

最新发布

letterTiger的博客

06-14

826

ResizeObserver用于监听content size和border size的变化。但是元素的变化和监听可能会导致循环触发，例如有元素A，监听元素A尺寸变化后将元素A的宽度加10px，如果没有特殊处理，那么线程将一直被占用无法进行其他任务，因为：A 宽度加10，监听到元素A尺寸变化后，A 宽度加10，监听到元素A尺寸变化后，A 宽度加10…就这么一直下去。

VUE3 中的 ResizeObserver 警告彻底解决方案

2301_76849350的博客

05-20

1451

今天在使用 Vue 3 + Ant Design Vue 开发后台管理系统时，在页面频繁触发元素尺寸变化（如表格滚动、窗口缩放）的时候，控制台频繁出现如下警告： ResizeObserver loop completed with undelivered notifications. 经过查询，这是一个浏览器层面的警告，尤其是 Chrome 对 ResizeObserver 的限制提示 —— 它不会导致程序

vue + element plus：ResizeObserver loop completed with undelivered notifications

weixin_44384273的博客

04-10

1万+

ResizeObserver loop completed with undelivered notifications.

meis27461的博客

05-27

967

如下图所示，通过查看其抛出错误信息的上下文，发现了这是webpack相关的代码，那么就可以确定，这个错误100%是webpack抛出的，虽然webpack为什么抛出这个错误的原因还是未知，但是我们可以通过防抖的方式解决。经过初步排查，这个错误并不是vue以及element-plus发出的报错，因为其源码并未找到关于。再次排查发现这也不是js的错误，因为控制台并未报出error。解决代码如下，直接放到main.js的下方，能保证加载就行。写项目的时候报的错，经过排查法，发现是。

【VUE3 疑难杂症】使用 elementplus 报错：ResizeObserver loop completed with undelivered notifications.

励志成为会前后端、运维、云服务、嵌入式开发、AI和自动化技术的创业小老板！

08-21

4382

# 总览1.问题根源2.解决办法# 一、问题根源### 1.你是否在代码中使用了 el-table 组件？这个问题的根源在于，elementplus 中，移除了默认宽度，所以你如果要使用 el-table，就必须添加 width="xxx"不添加？不添加就等着报错吧宝贝示例：请看，在这个行中，我没有设置 width="xxx"，

一个 React 钩子，允许您使用 ResizeObserver 来测量元素的大小_TypeScript_代码_相关文件

07-12

一个 React 钩子，允许您使用 ResizeObserver 来测量元素的大小。强调用TypeScript编写。 Tiny : 648B (minified, gzipped) 由size-limit监控。如果您需要更多控制，则公开onResize 回调。 box 选项。与SSR一起...

react-antd-admin:react + ts + antd实现的管理系统模版

03-11

react-antd-admin 基于react + ts + antd建立的管理后台脚手架模版线上地址 git地址单独使用详情请查看 1.配置抽屉 1-1。可缓存系统配置记录用户使用的系统配置，缓存浏览器中，记录用户习惯。 1-2.antd换肤...

react-resize-observer-hook:ResizeObserver + React钩子

05-02

React调整观察者挂钩 ResizeObserver + React钩子演示版安装 yarn add react-resize-observer-hook 用法 import { useState , useRef } from 'react' ; import useResize from 'react-resize-observer-hook' ; export default ( ) => { const [ dimensions , setDimensions ] = useState ( { width : 100 , height : 50 } ) const parentRef = useRef ( null ) ; useResizeObserver ( parentRef , ( entry ) => setDimensions ( { wid

react-admin：React + AntD后台管理系统解决方案

02-05

（蚂蚁金服开源react ui组件框架 :thumbs_up: ）（状态管理 :thumbs_up: ）（ react版本的redux :thumbs_up: ）（ dispatch返回函数 :thumbs_up: ）（ http请求模块，可用于前端任何场景，很强大 :thumbs_...

React+antd后台管理系统模板

12-01

React+antd后台管理系统模板是一个利用React前端框架和antd UI库构建的管理界面示例项目。这个模板主要用于开发者熟悉React和antd组件库的使用，同时也展示了如何在React应用中集成react-router进行页面路由管理。让...

【报错】ResizeObserver loop completed with undelivered notifications

z914020826的博客

03-22

3457

在App.vue文件中加入防抖函数就行了，debounce方法可以自己写，我为了保持稳定性，采用了lodash。今天在写项目（Vue3+TS）的时候遇见了报错。原因我也不是很清楚，问了GPT，回答如下。

ant-design-vue:ResizeObserver loop completed with undelivered notifications

angle12138的博客

12-14

1607

报错是在使用ant-design-vue@4.0.7版本的table组件时出现的。

global.tsx:96 ResizeObserver loop completed with undelivered notifications.

03-09

### 解决 `ResizeObserver` 循环完成时存在未交付通知的问题当遇到 `ResizeObserver loop completed with undelivered notifications` 错误时，这通常意味着观察目标的数量过多或布局不稳定性导致性能问题。一种常见的解决方案是在应用中捕获并处理此类错误事件。 #### 使用 Error Boundary 处理异常为了防止此错误影响整个应用程序，在 React 组件树中的合适位置设置一个错误边界可以有效隔离潜在的影响： ```javascript class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error("Uncaught error:", error, errorInfo); } render() { if (this.state.hasError) { return <h1>Something went wrong.</h1>; } return this.props.children; } } ``` 通过这种方式可以在不影响其他部分的情况下优雅降级受影响区域[^1]。 #### 隐藏特定环境下的警告信息对于开发环境中频繁出现但不影响实际使用的提示消息，可以选择性地屏蔽这些日志输出而不必完全忽略所有控制台记录。例如针对 Webpack 开发服务器叠加层的 CSS 样式调整可减少视觉干扰： ```css /* global.css */ #webpack-dev-server-client-overlay { display: none !important; } ``` 这种方法适用于快速消除不必要的调试信息而无需修改业务逻辑代码[^2]。 #### 调整 ResizeObserver 的使用方式从根本上解决问题还需要审视如何运用 `ResizeObserver` API 。确保每次创建新的实例之前清理旧有的监听器，并合理规划被观测对象数量以维持良好的渲染效率。另外考虑采用防抖(debounce)/节流(throttle)技术来降低更新频率从而减轻浏览器负担。 ```typescript // global.tsx import { useEffect } from 'react'; function useDebouncedResizeObserver(ref, callback, wait = 16) { let timeoutId; const observer = new window.ResizeObserver((entries) => { clearTimeout(timeoutId); timeoutId = setTimeout(() => { entries.forEach(entry => callback(entry)); }, wait); }); useEffect(() => { if (!ref.current) return; observer.observe(ref.current); return () => { observer.unobserve(ref.current); }; }, [ref]); } export default function GlobalComponent({ children }) { // ... other code ... return ( <> {/* Your layout here */} {children} </> ); } ``` 上述方法展示了如何利用自定义 Hook 实现带有延迟特性的尺寸变化侦测机制，有助于缓解因过度触发引起的性能瓶颈[^4]。