如何解决React中使用MUI Table时的ResizeObserver循环报错问题

问题描述 #

在React项目中使用@mui/material的Table组件时，浏览器窗口调整大小会触发报错：

Uncaught runtime errors: ERROR ResizeObserver loop completed with undelivered notifications.

复现代码 #

import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';

import TextField from '@mui/material/TextField';

export type ResizeObserverErrorProperties = object;

export function ResizeObserverError(props: ResizeObserverErrorProperties) {
    return (
        <TableContainer>
            <Table>
                <TableHead></TableHead>
                <TableBody>
                    <TableRow key="description">
                        <TableCell>
                            <TextField
                                id={'description'}
                                value={
                                    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
                                }
                                fullWidth
                                multiline
                            />
                        </TableCell>
                    </TableRow>
                </TableBody>
            </Table>
        </TableContainer>
    );
}

export default ResizeObserverError;

已尝试的无效方案 #

• 移除fullWidth：报错消失，但TextField宽度不足
• 移除multiline：报错消失，但文本仅单行显示
• 添加rows={4}：报错消失，但TextField固定为4行高度
• 添加minRows={3}或maxRows={10}：报错仍存在

有效解决方案 #

方案1：全局捕获并忽略该良性报错 #

该报错属于ResizeObserver API的已知良性行为，不会影响功能，可在项目入口文件中全局拦截：

// 入口文件如index.tsx
window.addEventListener('error', (event) => {
  if (event.message.includes('ResizeObserver loop completed with undelivered notifications')) {
    event.stopImmediatePropagation();
    event.preventDefault();
  }
});

方案2：手动控制TextField宽度替代fullWidth属性 #

通过外层容器设置100%宽度，移除TextField的fullWidth属性，避免内部ResizeObserver与Table布局冲突：

// 修改后的组件代码
import Box from '@mui/material/Box';

export function ResizeObserverError(props: ResizeObserverErrorProperties) {
    return (
        <TableContainer>
            <Table>
                <TableHead></TableHead>
                <TableBody>
                    <TableRow key="description">
                        <TableCell>
                            <Box sx={{ width: '100%' }}>
                                <TextField
                                    id={'description'}
                                    value={
                                        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
                                    }
                                    multiline
                                    sx={{ width: '100%' }}
                                />
                            </Box>
                        </TableCell>
                    </TableRow>
                </TableBody>
            </Table>
        </TableContainer>
    );
}

方案3：禁用TextField内部的ResizeObserver（MUI v5+） #

通过自定义TextField的Input组件，禁用自动调整大小的ResizeObserver，同时保留手动调整高度功能：

import TextField from '@mui/material/TextField';

export function ResizeObserverError(props: ResizeObserverErrorProperties) {
    return (
        <TableContainer>
            <Table>
                <TableHead></TableHead>
                <TableBody>
                    <TableRow key="description">
                        <TableCell>
                            <TextField
                                id={'description'}
                                value={
                                    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
                                }
                                fullWidth
                                multiline
                                InputProps={{
                                    disableAutosize: true,
                                }}
                                sx={{
                                    '& textarea': {
                                        resize: 'vertical',
                                        minHeight: '100px',
                                    }
                                }}
                            />
                        </TableCell>
                    </TableRow>
                </TableBody>
            </Table>
        </TableContainer>
    );
}

原因说明 #

该报错是ResizeObserver API的固有行为：当观察者的回调在同一帧内无法处理所有尺寸变化通知时触发，属于非破坏性的良性错误。在MUI场景中，TextField同时开启fullWidth和multiline时，内部的自动ResizeObserver与Table的布局逻辑产生了循环通知，最终触发该报错。

内容的提问来源于stack exchange，提问作者roland606