Mui-datatables Material-UI: TablePagination 的 page prop 超出范围

Question

我创建了一个最小示例 sandbox 来展示 problem/bug

重现步骤：

转到this link
转到第 2 页
点击页面顶部的按钮

发生的事情是我们的 rowsPerPage 是 2，但我们最初有 4 行，所以我们有 2 页。

当我们导航到第二页（显示第 3 和第 4 行）时，到目前为止一切都很好，但是当我们将 table 数据更改为仅包含 2 行的数组时，table 重新呈现但仍显示第二页（这是空的，因为我们的 newData 仅包含 2 行，而我们的 rowsPerPage 是 2）。

此时您必须单击 左箭头 才能转到您将看到 newData

的页面

我希望我足够清楚，我该如何解决这个问题？

Answer 1

在最新版本的库中，这看起来像是他们这边的未决问题。如果您可以选择降级到较低版本的库，那么您的代码在 mui-datatables.

的 2.0.0 版本中工作得很好

Answer 2

我遇到了类似的问题。就我而言，警告是在我的应用程序处于加载状态时生成的。加载数据时，我的记录数 = 0 导致页面道具验证器抛出警告。

我找到了两种解决方法：

1.在加载阶段隐藏分页

这应该可以消除警告，但可能会使 UI 在页面加载时因闪烁而感觉“卡顿”。

2。使用三元逻辑在加载时确定页面值

这是我的首选解决方案，允许我在加载页面时继续显示分页控件。短暂的加载期间分页信息不准确，但我觉得比闪烁更有利。

为了达到预期的结果，我创建了一个常量来将一些逻辑传递到我的 table 组件的 currentPage 属性中：

// using a material-ui component in react web app
    
// sets page to 0 while loading

const pageWithLoading = {(page > 0 && records.length < rowsPerPage) ? 0 : page} 

<TablePagination curentPage={pageLoadingRange} {...props} />

我找到了关于这些解决方案的很好的讨论here on GitHub

Answer 3

有同样的问题，不想弄乱版本所以我想出了一个解决方法：

Math.min(count, pageIndex) 为 page prop

做了把戏

<TablePagination
            rowsPerPageOptions={[2, 5, 10, 25, 50]}
            component="div"
            count={count}
            rowsPerPage={rowsPerPage}
            page={Math.min(count, pageIndex)}
            onPageChange={onPageIndexChange}
            onRowsPerPageChange={onRowsPerPageChange}/>

Answer 4

<TablePagination
          rowsPerPageOptions={[5, 10, 20, 25, 50, 75, 100]}
          component="div"
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={Math.min(rows.length, page)}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
        />

Mui-datatables Material-UI: TablePagination 的 page prop 超出范围

Mui-datatables Material-UI: the page prop of a TablePagination is out of range

reactjs

material-ui

mui-datatable