如何修复“未接收错误：t＆quot”仅读取”在MUI DataGridPro中

Question

我正在尝试使用MUI DataGridPro，但是我一直在遇到“错误”，而不是呈现我的数据的组件。数据是硬编码的，因此我知道数据不存在并不是问题。

我在控制台中收到以下错误：

列出的文件都是DataGridPro原生的所有内容，我什么也没有触摸，所以我不知道该如何修复它（我什至不确定什么是“ t”或在哪里称呼）。

这是我的DataGridPro组件的代码：

import Box from '@mui/material/Box';
import {
    DataGridPro,
    GridColumns,
    GridRowsProp,
    GridToolbar,
    LicenseInfo,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { styled } from '@mui/material/styles';
import FormControl from '@mui/material/FormControl';
import FormGroup from '@mui/material/FormGroup';
import Button from '@mui/material/Button';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import { Typography } from '@mui/material';

const columns: GridColumns = [
    { field: 'voicemail', headerName: 'VOICEMAIL' },
    { field: 'patientName', headerName: 'PATIENT NAME' },
    { field: 'patientId', headerName: 'PATIENT ID' },
    { field: 'phoneNumber', headerName: 'PHONE NUMBER' },
    { field: 'callTime', headerName: 'TIME OF CALL' },
    { field: 'department', headerName: 'DEPARTMENT' },
    { field: 'status', headerName: 'STATUS' },
    { field: 'assignee', headerName: 'ASSIGNEE' },
];

const rows: GridRowsProp = [
    {
        id: 1,
        voicemail: '00:13:23',
        patientName: 'Holly Shelton',
        patientID: '78491684',
        phoneNumber: '(667) 370-2337',
        callTime: '2:30 pm EST',
        department: 'Enrollment',
        status: 'Open',
        assignee: 'Unassigned',
    },
    {
        id: 2,
        voicemail: '00:11:08',
        patientName: 'Sharon Bishop',
        patientID: '24742813',
        phoneNumber: '(345) 246-4865',
        callTime: '3:30 pm EST',
        department: 'Medical',
        status: 'Unavailable',
        assignee: 'Alex Alvarez',
    },
    {
        id: 3,
        voicemail: '00:15:08',
        patientName: 'Marcus Shelton',
        patientID: '49030689',
        phoneNumber: '(432) 753-8463',
        callTime: '4:30 pm EST',
        department: 'Medical',
        status: 'Call BAck',
        assignee: 'Pablo Lueng',
    },
];

const VoicemailGrid = (): JSX.Element => (
    <Box width="100%" height="350px">
        <Typography>Rendering</Typography>
        <DataGridPro
            rows={rows}
            columns={columns}
        />
    </Box>
);

export default VoicemailGrid;

然后在index.tsx中：

import type { FC } from 'react';
import { Container, makeStyles } from '@material-ui/core';
import type { Theme } from 'src/theme';
import Page from 'src/components/Page';
import VoicemailGrid from 'src/components/VoicemailComponents/VoicemailGrid';
import Header from './Header';

const useStyles = makeStyles((theme: Theme) => ({
    root: {
        backgroundColor: theme.palette.background.dark,
        height: '100vh',
        paddingTop: theme.spacing(3),
        paddingBottom: theme.spacing(3),
    },
}));

const PatientChart: FC<any> = () => {
    const classes = useStyles();
    return (
        <Page className={classes.root} title="Voicemail">
            <Container maxWidth="xl">
                <Header />
                <VoicemailGrid />
            </Container>
        </Page>
    );
};

PatientChart.propTypes = {

};

export default PatientChart;

Answer 1

尝试以下步骤

1. 删除node_modules
2. 删除yarn.lock/package-lock.json
3. yarn install/npm安装
4. 重试