Reactjs 材质UI数据网格的钩子调用无效

Reactjs 材质UI数据网格的钩子调用无效,reactjs,material-ui,electron,Reactjs,Material Ui,Electron,我正在尝试使用Electron创建一个React.js应用程序,并尝试创建一个数据网格来显示我的数据。我最初有Material UI数据网格组件,但它给了我以下错误: 我花了大约3天的时间试图弄清楚为什么这不起作用,最后我决定尝试另一个数据网格包,我安装了,但得到了相同的结果 这是否与我编写代码的方式有关,还是与软件包和Electron之间的兼容性有关,以及如何修复它 应用程序tsx使用@material iu/数据网格 import React from 'react' import Reac

我正在尝试使用Electron创建一个React.js应用程序,并尝试创建一个数据网格来显示我的数据。我最初有Material UI数据网格组件,但它给了我以下错误:

我花了大约3天的时间试图弄清楚为什么这不起作用,最后我决定尝试另一个数据网格包,我安装了,但得到了相同的结果

这是否与我编写代码的方式有关,还是与软件包和Electron之间的兼容性有关,以及如何修复它

应用程序tsx使用@material iu/数据网格

import React from 'react'
import ReactDOM from 'react-dom'
// import TestComponent from './test'
import { DataGrid } from '@material-ui/data-grid'


const App: React.FC = function () {
    return (
        <div style={{ textAlign: 'center' }}>
          <p>Hello</p>
        </div>
    )
}


const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'firstName', headerName: 'First name', width: 130 },
    { field: 'lastName', headerName: 'Last name', width: 130 },
    {
      field: 'age',
      headerName: 'Age',
      type: 'number',
      width: 90,
    },
    {
      field: 'fullName',
      headerName: 'Full name',
      description: 'This column has a value getter and is not sortable.',
      sortable: false,
      width: 160,
      valueGetter: (params: any) =>
        `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`,
    },
  ];
  
  const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
    { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
    { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
  ];

function DataGridDemo() {
    return (
      <div style={{ height: 400, width: '100%' }}>
        <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
      </div>
    );
  }

ReactDOM.render(<DataGridDemo />, document.getElementById('app'));

您很可能没有在代码共享实现的某个地方正确使用钩子