如何阻止React应用中出现"ResizeObserver loop limit exceeded"的错误？

最近，我的 React 应用程序中开始出现一个新错误：

ResizeObserver loop limit exceeded

似乎普遍的共识是该错误是良性的，没有什么可担心的。

但是，当我通过 npm start 测试我的程序时，我不确定如何忽略它或让它停止显示。

出现的屏幕如下所示：

有什么方法可以抑制此页面或其他地方的此特殊错误，这样我就不必每次都将其忽略？

该错误来自我使用的 MUI Masonry 组件，但我的理解是它可能来自许多依赖项。

这是我使用它的代码，以防有助于抑制此错误。

import Masonry from '@mui/lab/Masonry';
import { Box } from '@mui/material';
import { ReactNode } from 'react';
import { BsFillPlusSquareFill as AddButton } from 'react-icons/bs';
import { useNavigate } from 'react-router';
import { LoadingIndicator } from '../LoadingIndicator';
import { BackButton } from './BackButton';
import styles from './SheskaList.module.css';

export const SheskaListContent = (props: { loading: boolean, cards: ReactNode[] }) => {
    const navigate = useNavigate();

    return (
        <Box className={styles.gridContainer}>
            <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' />
            <div className={styles.pageTitleContainer}>
                <h1 className={styles.pageTitle}> Your Sheska List </h1>
                <AddButton size={'3em'} className={styles.addCardButton} onClick={() => {navigate('/newitem')}} />
            </div>
            <Masonry columns={{lg: 2, xs: 1}} spacing={3} id={styles.grid}>
                {
                    props.loading
                    ?
                    <LoadingIndicator />
                    :
                    props.cards[0] as NonNullable<ReactNode>
                }
                <BackButton key='back-button' location='/dashboard' text='Return to Home' />
                {
                    !props.loading
                    &&
                    props.cards.slice(1)
                }
            </Masonry>
        </Box>
    );
}

我尝试更新我的依赖项并查看是否有其他人在 github 上遇到此问题，但我找不到任何内容。如果有我可以尝试的解决方案，请告诉我，我看到可以编辑 ESLINT 配置，但我真的想避免弹出我的 create-react-app。

我遇到了同样的问题，但在将 webpack 版本更新到 5.x.x 后，出现了来自 react-virtuoso 的虚拟化列表（https://github.com/petyosi/react-virtuoso/issues/254）。根据 Hai Nguyen Le (https://stackoverflow.com/a/76107850/3328233) 的回答，我创建了一个它的更简单版本仅捕获 ResizeObserver 错误：

    useEffect(() => {
    window.addEventListener('error', e => {
        if (e.message === 'ResizeObserver loop limit exceeded') {
            const resizeObserverErrDiv = document.getElementById(
                'webpack-dev-server-client-overlay-div'
            );
            const resizeObserverErr = document.getElementById(
                'webpack-dev-server-client-overlay'
            );
            if (resizeObserverErr) {
                resizeObserverErr.setAttribute('style', 'display: none');
            }
            if (resizeObserverErrDiv) {
                resizeObserverErrDiv.setAttribute('style', 'display: none');
            }
        }
    });
}, []);

有同样的问题，最终是由于 Masonry 组件内的第一个元素具有 100% 宽度，一旦我删除了它（实际上使其在 XS 下响应为 100% - 在那里它没有问题..）问题就停止了..

在您的 React 应用程序中，推送以下代码：

    useBeforeRender(() => {
    window.addEventListener("error", (e) => {
      if (e) {
        const resizeObserverErrDiv = document.getElementById(
          "webpack-dev-server-client-overlay-div",
        );
        const resizeObserverErr = document.getElementById(
          "webpack-dev-server-client-overlay",
        );
        if (resizeObserverErr)
          resizeObserverErr.className = "hide-resize-observer";
        if (resizeObserverErrDiv)
          resizeObserverErrDiv.className = "hide-resize-observer";
      }
    });
  }, []);

并创建钩子：useBeforeRender

import { useEffect, useState } from "react";

export const useBeforeRender = (callback: any, deps: any) => {
  const [isRun, setIsRun] = useState(false);

  if (!isRun) {
    callback();
    setIsRun(true);
  }

  useEffect(() => () => setIsRun(false), deps);
};

在 .scss 或 .css 文件中使用它：

.hide-resize-observer {
  display: none !important;
}

您可以将 webpack 配置为不显示此错误的覆盖图。为此，您可以在字段“client”内添加配置，该字段位于“devServer”字段内，如下：

      overlay: {
    runtimeErrors: (error) => {
      if (error.message === "ResizeObserver loop limit exceeded") {
        return false;
      }
      return true;
    },
  },

这是有关它的文档： https://webpack.js.org/configuration/dev -server/#overlay 。

我收到此错误是因为我滥用了ag-grid 的onFirstDataRenderered。如果使用onFirstDataRendered调用sizeColumnsToFit方法，可能会出现此错误。相反，你应该使用onGridReady

<script>
   window.addEventListener('error', function (e) {
    console.error(e.message);
       // prevent React's listener from firing
    e.stopImmediatePropagation();
      // prevent the browser's console error message
    e.preventDefault();
 });

将此代码添加到您的索引文件中并查看结果！

我收到此错误是因为在调用 function 时，在状态更新之前调用端点。

修复：更新状态后，调用端点