reactjs 如何阻止React应用程序中出现“ResizeObserver循环限制超出”错误

0md85ypi  于 2023-04-11  发布在  React
关注(0)|答案(1)|浏览(632)

最近,我的React应用程序中出现了一个新的错误:
ResizeObserver loop limit exceeded
似乎普遍的共识是错误是良性的和there is nothing to worry about
然而,我不知道如何忽略它或让它停止显示时,我测试我的程序通过npm start
出现的屏幕如下所示:

有没有什么方法可以抑制这个页面上的这个错误,这样我就不必每次都忽略它了?
错误来自我使用的MUI Masonry component,但我的理解是它可能来自许多依赖项。
下面是我使用它的代码,它有助于抑制这个错误。

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。

gdrx4gfi

gdrx4gfi1#

有同样的问题,它最终是由于砌体组件内的第一个元素具有100%的宽度,一旦我删除了(实际上使它在XS下的响应是100% -在那里它没有问题..)问题停止..

相关问题