无法读取未定义的属性（读取“方向”）React JS Material Table

Question

使用 React JS 安装材质表并将数据映射到其中后，在运行应用程序时，此错误将显示在控制台上。其中的原因我很难想象。

下面是我开发的表格。

`
const empList = [ { id: 1，姓名：“Neeraj”，电子邮件：'neeraj@gmail.com'，电话：9876543210，城市：“班加罗尔” }，{ id：2，姓名：“Raj”，电子邮件： 'raj@gmail.com'，电话：9812345678，城市：“钦奈”}，{ id：3，姓名：“大卫”，电子邮件：'david342@gmail.com'，电话：7896536289，城市：“斋浦尔”} , { id: 4, 姓名: "Vikas", 电子邮件: 'vikas75@gmail.com', 电话: 9087654321, 城市: "海得拉巴" }, ]

const [data, setData] = useState(empList)

const columns = [
    { title: "ID", field: "id", editable: false },
    { title: "Name", field: "name" },
    { title: "Email", field: "email" },
    { title: "Phone Number", field: 'phone', },
    { title: "City", field: "city", }
]


            
                <h5>
                    List of Services
                </h5>
            
            <MaterialTable
                title="Employee Data"
                data={data}
                columns={columns}
            />


        </div>`

Answer 1

我也遇到了同样的错误，似乎他们没有涵盖没有提供主题的情况。因此，为了让 MaterialTable 正常工作，您至少需要以下实现：

\n

import * as React from 'react';\nimport MaterialTable from 'material-table';\nimport { ThemeProvider, createTheme } from '@mui/material';\n\nexport class DataGridReact extends React.Component {\n    public render(): JSX.Element {\n        const defaultMaterialTheme = createTheme();\n\n        return(\n            <div style={{ width: '100%', height: '100%' }}>\n                <link\n                    rel="stylesheet"\n                    href="https://fonts.googleapis.com/icon?family=Material+Icons"\n                    />\n                <ThemeProvider theme={defaultMaterialTheme}>\n                    <MaterialTable\n                        columns={[\n                        { title: 'Name', field: 'name' },\n                        { title: 'Surname', field: 'surname' },\n                        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },\n                        { title: 'Birth City', field: 'birthCity', lookup: { 1: 'Linz', 2: 'V\xc3\xb6cklabruck', 3: 'Salzburg' } }\n                        ]}\n                        data={[\n                            { name: 'Max', surname: 'Mustermann', birthYear: 1987, birthCity: 1 },\n                            { name: 'Cindy', surname: 'Musterfrau', birthYear: 1995, birthCity: 2 }\n                        ]}\n                        title="Personen"\n                    />\n                </ThemeProvider>\n            </div>\n        );\n    }\n}\n

\n

Answer 2

所以我想出了解决办法。如果您当前的材质表版本是2.0.3，只需卸载您的版本并重新安装1.69.3版本即可。这将解决问题，它对我有用。他们最近发布了 2.0.3 版本（10 天前），它似乎有错误，我想这就是你和我遇到问题的原因。