未捕获的类型错误：onPageChange 不是 Material UI 中 DataGrid 的函数

Question

我正在尝试将 DataGrid 添加到我的应用程序中。下面的代码表渲染得很好，但是单击下一页图标时，我收到错误-react-dom.development.js:327 Uncaught TypeError: onPageChange is not a function。

请让我知道我在这里做错了什么。

      <DataGrid rows={this.props.rowsData} 
                columns={this.props.columnsData} 
                sortModel={[
                  {
                    field: 'id',**strong text**
                    sort: 'asc',
                  },
                ]}
                pagination
                pageSize={5}
                rowCount={100}
                paginationMode="server"
                onPageChange={(params) => {
                  console.log("===params===",params);
                }}
                loading={this.state.loading}
                />

下面是作为 props 传递的行数据的详细信息

[
    {
        "id": 1,
        "columnNameA": "My Project 1",
        "columnNameB": null,
        "columnNameC": 65.9,
        "columnNameD": 5,
        "columnNameE": 387,
        "columnNameF": 0,
        "columnNameG": null
  },
    {
        "id": 2,
        "columnNameA": "My Project 2",
        "columnNameB": null,
        "columnNameC": 83,
        "columnNameD": 0,
        "columnNameE": 6,
        "columnNameF": 0,
        "columnNameG": null 
  }
]

以下是作为 props 传递的列数据的详细信息

[
    {
        "field": "id",
        "headerName": "Sl No",
        "width": 100,
        "headerClassName": "reportTable-col-header",
        "title": "Sl No"  
  },
    {
        "field": "columnNameA",
        "headerName": "First Column",
        "width": 300,
        "sortable": false,
        "headerClassName": "reportTable-col-header"  
  },
    {
        "field": "columnNameB",
        "headerName": "Second Column",
        "headerClassName": "reportTable-col-header",
        "width": 200,
        "resizable": true,
        "title": "Second Column"  
  },
    {
        "field": "columnNameC",
        "headerName": "Third Column",
        "headerClassName": "reportTable-col-header",
        "width": 200,
        "resizable": true,
        "title": "Third Column"  
  },
    {
        "field": "columnNameD",
        "headerName": "Fourth Column",
        "headerClassName": "reportTable-col-header",
        "width": 200,
        "resizable": true,
        "title": "Fourth Column"  
  },
    {
        "field": "columnNameE",
        "headerName": "Fifth Column",
        "headerClassName": "reportTable-col-header",
        "width": 200,
        "resizable": true,
        "title": "Fifth Column"  
  },
    {
        "field": "columnNameF",
        "headerName": "Sixth Column",
        "headerClassName": "reportTable-col-header",
        "width": 200,
        "resizable": true,
        "title": "Sixth Column"  
  },
    {
        "field": "columnNameG",
        "headerName": "Seventh Column",
        "headerClassName": "reportTable-col-header",
        "width": 200,
        "resizable": true,
        "title": "Seventh Column"  
  }
]

Answer 1

如果您使用的是 Material UI 4，请尝试使用

onChangePage={(params) => {
              console.log("===params===",params);
            }}

而不是

onPageChange={(params) => {
              console.log("===params===",params);
            }}

注意名称上的细微差别。尽管它声明 onChangePage 已被弃用，但这可能只是一个版本控制问题，并且可以在您的项目中使用。

Answer 2

检查如何定义 rowsData 和 columnsData。我使用相同的 DataGrid 代码制作了一个工作示例，我使用了自己的行和列数据，我可以很好地调用 onPageChange() ：https://codesandbox.io/s/upbeat-panini-975sd?file=/src /应用程序.js

Answer 3

是的，MUI DataGrid 中没有

onPageChange

和

onPageSizeChange

选项

您需要向

paginationModel

提供

onPaginationModelChange

和

DataGrid

属性，因为

onPageChange

和

onPageSizeChange

都在

onPaginationModelChange

内部处理。

const [paginationModel, setPaginationModel] = React.useState({
  pageSize: 25,
  page: 0,
});

<DataGrid
  paginationModel={paginationModel}
  onPaginationModelChange={setPaginationModel}
/>

来源：官方文档