React：ResizeObserver 循环已完成但未传递通知

Question

当我关闭特定模式时，我看到以下错误：

当我使用react-router v5时，这种情况并没有发生，但由于其他要求，我最近更新到了v6，并且它开始发生。有趣的是，我有第二个页面调用相同的对话框，但它不会触发错误。

（请注意，这是一个开发环境，而不是生产环境。它可能不会出现在生产中，或者只是转到控制台。）

我似乎无法通过谷歌搜索找到任何东西......我得到的最接近的是对“ResizeObserver - 超出循环限制”的引用。我对此感到困惑，因为它没有出现在另一页上。更糟糕的是，该应用程序正在使用 Bootstrap v3（由于公司遗留原因，我现在没有足够的带宽来解决这个问题）。

有任何想法吗？

Answer 1

有问题的对话框正在渲染一个表单，通过一次删除一个元素，我能够确定是一个特定的文本输入字段导致了问题。

该问题源于 LastPass 浏览器扩展尝试为该字段提供自动填充选项。如果我缩短了字段的宽度，就不再导致错误。如果我禁用了 LP 自动填充图标，它也解决了这个问题。我选择了后者，因为无论如何这都不是 LP 能够真正自动填充的东西。

我不知道为什么只有当我从 v5 升级到 v6 时才会触发此问题react-router-dom。我们尚未收到升级代码的登台和生产实例可以与现场出现的 LP 图标正常配合。尽管如此，这个问题对我来说已经解决了。

Answer 2

我偶然发现了一个类似的问题，尽管与反应路由器本身不太相关。

规范表明，在无限调整大小循环的情况下会发生这种情况 ，如此处所示。

为了防止这种情况发生，我们想出了一个巧妙的中介函数，它可以用来window.requestAnimationFrame()正确地渲染事物。

打字稿代码：

    const observerCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
      window.requestAnimationFrame((): void | undefined => {
        if (!Array.isArray(entries) || !entries.length) {
          return;
        }
        yourResizeHandler();
      });
    };
    const resizeObserver = new ResizeObserver(observerCallback);

Answer 3

将以下行添加到您的主 CSS 文件中，例如 app.css 或 app.scss

iframe#webpack-dev-server-client-overlay{display:none!important}