无法读取未定义的属性（读取 'direction'）React JS Material Table

Question

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

下面是我开发的table

`
const empList = [ { id: 1, name: "Neeraj", email: 'neeraj@gmail.com', phone: 9876543210, city: "班加罗尔" }, { id: 2, name: "Raj", email: 'raj@gmail.com', phone: 9812345678, city: "Chennai" }, { id: 3, name: "David", email: 'david342@gmail.com', phone: 7896536289, city: "Jaipur" }, { id: 4, name: "Vikas", email: 'vikas75@gmail.com', phone: 9087654321, city: "Hyderabad" }, ]

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版本是2.0.3，只需卸载您的版本和re-install版本1.69.3。这将解决问题，它对我有用。他们最近（10 天前）发布了 2.0.3 版本，它似乎有错误，我想这就是你我遇到问题的原因。

Answer 2

我尝试了所有可能的方法，但 material-table 包本身似乎有问题。我也尝试安装 v1.69.3，但它显示了一些 19 个错误，所有这些错误都来自 Metrial-Table 包，这表明它确实有问题。对于其他一些版本，它显示了来自包本身的大约 20 个错误，这些错误在我重新安装 @material-ui/core 后被消除，如他们网站 https://material-table.com/#/docs/install:~:text=npm%20install%20material%2Dtable%20%2D%2Dsave%0Anpm%20install%20%40material%2Dui/core%20%2D%2Dsave 所述，但是 table 的问题是没有显示仍然存在。

最终安装了依赖于早于 16 的 React 版本的非常旧的版本，对我有所帮助。你可以运行 :

npm uninstall material-table

然后运行以下：

npm install material-table@1.36.0 --save

然后检查它是否有效，如果没有尝试运行

npm install @material-ui/core --save

或

npm install 在终端中。我希望它能帮助你获得运行ning，但我注意到虽然显示 table 但它扰乱了 material ui 本身的某些功能。

Answer 3

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

import * as React from 'react';
import MaterialTable from 'material-table';
import { ThemeProvider, createTheme } from '@mui/material';

export class DataGridReact extends React.Component {
    public render(): JSX.Element {
        const defaultMaterialTheme = createTheme();

        return(
            <div style={{ width: '100%', height: '100%' }}>
                <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/icon?family=Material+Icons"
                    />
                <ThemeProvider theme={defaultMaterialTheme}>
                    <MaterialTable
                        columns={[
                        { title: 'Name', field: 'name' },
                        { title: 'Surname', field: 'surname' },
                        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
                        { title: 'Birth City', field: 'birthCity', lookup: { 1: 'Linz', 2: 'Vöcklabruck', 3: 'Salzburg' } }
                        ]}
                        data={[
                            { name: 'Max', surname: 'Mustermann', birthYear: 1987, birthCity: 1 },
                            { name: 'Cindy', surname: 'Musterfrau', birthYear: 1995, birthCity: 2 }
                        ]}
                        title="Personen"
                    />
                </ThemeProvider>
            </div>
        );
    }
}

无法读取未定义的属性（读取 'direction'）React JS Material Table

Cannot read properties of undefined (reading 'direction') React JS Material Table

datatable

reactjs