Material UI 材质表 TablePagination 问题。 （反应）

Posted 2023-02-22

【中文标题】Material UI 材质表 TablePagination 问题。 （反应）

【英文标题】：Material UI material-table TablePagination issue. (React)

【发布时间】：2021-06-01 21:22:01

【问题描述】：

我正在使用material-table。 TablePagination 不工作。它会在控制台中引发错误。

我尝试按照文档安装软件包。

https://material-table.com/#/docs/install

npm install material-table --save
npm install @material-ui/core --save

我得到这个错误：

Material-UI：提供给 classes 属性的键 caption 不是 在 ForwardRef(TablePagination) 中实现。你只能覆盖一个 以下各项：root、工具栏、空格、selectLabel、selectRoot、select、selectIcon、input、menuItem、displayedRows、actions。

警告：失败的道具类型：道具onPageChange 被标记为 ForwardRef(TablePagination) 中需要，但其值为 undefined.

警告：未知的事件处理程序属性 onChangePage。这将是 忽略。

警告：未知的事件处理程序属性 onChangeRowsPerPage。它会 被忽略。

版本：

"@material-ui/core": "^5.0.0-alpha.24",
"material-table": "^1.69.2",

如果我尝试分页，它会在控制台中引发错误。

未捕获的类型错误：_this.props.onChangePage 不是函数

示例代码：

 <MaterialTable
  icons=tableIcons
  columns=columns
  data=editable
  title="Orders"
  localization=
    toolbar: 
      searchPlaceholder: 'Filter',
      searchTooltip: 'filters the given text'
    ,
    header: 
      actions: 'Actions'
    
  
  actions=[
    
      icon: 'save',
      tooltip: 'Save User',
      onClick: (event, rowData) =>
        alert('You saved ' + rowData.name)
    
  ]
  options=
    actionsColumnIndex: -1,
    selection: true,
    exportButton: true,
    showFirstLastPageButtons: true,
    pageSize: 5,
    padding: 'dense',
    pageSizeOptions: [5, 20, 50]
  
/>

【问题讨论】：

表格分页在哪里是你的代码？这是返回错误的代码吗？

所以基本上我使用的是一个组件库“material-table”，它需要安装另一个依赖material-ui核心库。在材质ui核心库中，表格分页的实现抛出了我上面提到的以下错误。

你搞定了吗@knock out

没有。所以基本上我使用的是材料 ui 的 beta 版本（付费/许可模板）。不支持材料表。所以我们实现了自己的自定义组件来处理分页逻辑。

【参考方案1】：

我遇到了同样的问题。对我来说，这是由于@material/core@4.12.1 的最新版本引起的，由于TablePagination 中不推荐使用的方法。由于material-table 使用了这个并且没有升级这些不推荐使用的方法，所以它会抛出错误。

我能够通过将@material-ui/core 版本降级为4.11.4 并将material-table 版本保持为1.69.3 来解决此问题。另一方面，正如@knock-out 所提到的。您可以创建自己的材料表组件。只需更改 -version

希望这有帮助！

【讨论】：

我在 material-ui 中遇到了一个与 TablePagination 相关的问题，特别是在 onRowsPerPageChange 道具上，对我来说，升级版本解决了我的问题。

【参考方案2】：

我发现材料表存储库没有与最新的材料 UI 更改保持同步。相反，请在此处查看 material-table 的分支：https://github.com/material-table-core/core，支持 Material UI v4，“下一个”版本正在开发中用于 v5。

更改代码非常容易以适应新的存储库。按照此处的说明进行操作：https://material-table-core.com/docs

【讨论】：

我们迁移到 material-table/core 并安装了带有“next”标签的版本，因为我们正在升级 material-ui v5。警告似乎还没有消失。

【参考方案3】：

对我来说，我设法通过删除旧的 material-ui 模块并安装一个新模块来解决这个问题

npm 删除材料表 npm install @material-table/core

然后在代码中 替换

import MaterialTable from 'material-table';

与

import MaterialTable from '@material-table/core';

感谢@Chris Livdahl 的回答