antd ResizeObserver loop completed with undelivered notifications.

这个错误是由于antd库中的ResizeObserver导致的。ResizeObserver是一种用于监听元素尺寸变化的API，但是当元素的尺寸变化过于频繁时，ResizeObserver可能会出现循环运行并且无法传递通知的情况。

要解决这个问题，你可以尝试以下方法：
1. 确保你的代码中没有无限循环调用ResizeObserver的情况。
2. 减少元素尺寸变化的频率，例如通过节流或防抖的方式来控制回调函数的触发频率。
3. 如果你使用的是antd库中的组件，可以查看相关文档或提交issue，看是否有已知的解决方案或者更新版本可以解决该问题。

相关问题

antd Uncaught ResizeObserver loop completed with undelivered notifications.

### 解析 ResizeObserver 循环未交付通知错误

当在 React 应用程序中使用 Ant Design Table 组件时，可能会遇到 `ResizeObserver loop completed with undelivered notifications` 错误。此问题通常发生在浏览器尝试处理大量调整大小事件而未能及时完成所有观察任务的情况下。

#### 修改 ResizeObserver 实现方式

一种常见的临时解决方案是在应用程序入口文件（如 App.js 或 index.js）中重写默认的 `ResizeObserver` 类，通过引入防抖动机制来减少频繁触发回调函数的可能性：

import _ from 'lodash';

const originalRO = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends originalRO {
  constructor(callback) {
    super(_.debounce(callback, 16));
  }
};

这种方法能够有效缓解由于快速连续调整尺寸引发的问题[^2]。

#### 调查根本原因并优化代码逻辑

然而，上述方法仅作为短期措施，并不能完全消除潜在隐患。要从根本上解决问题，则需深入分析以下几个方面：

- **检查 ResizeObserver 的回调函数**：确认是否存在耗时操作或不必要的计算过程；
- **审查相关的 DOM 操作**：确保每次更新都合理必要，避免过度修改文档结构；
- **评估组件的渲染逻辑**：特别是对于动态加载的数据列表或其他复杂界面元素，考虑采用虚拟滚动等技术提高性能效率；

针对特定场景下发生的错误实例，比如点击不同按钮切换多个表格显示时出现问题，建议将用于区分各列配置项的身份标识符设置为唯一的键值而不是简单的索引位置。这样做有助于防止因重复 key 值引起的意外行为[^3]。

例如，在定义表头字段时指定独一无二的 id 属性作为 react-key:

const columns = [
  { title: "Name", dataIndex: "name", key: "uniqueId_0" },
  { title: "Age", dataIndex: "age", key: "uniqueId_1" },
];

使用antd组件里面的级联选择器会报ResizeObserver loop completed with undelivered notifications.

这个错误通常是由于级联选择器的父组件在组件渲染时没有设置固定宽高导致的。可以尝试在级联选择器的父组件上设置一个固定宽高或者使用CSS样式为父组件添加一个min-height属性，例如：

.cascader-container {
  min-height: 200px;
}

如果问题仍然存在，可以尝试升级antd版本或者检查是否存在其他元素引起了ResizeObserver的循环。