数据资料-UI: TablePagination的页面支柱超出了范围

Question

我创建了一个最小的示例沙盒来显示问题/bug

复制步骤：

• 转到此链接
• 转到第2页
• 单击页面顶部的按钮

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

当我们导航到第二页(显示第3行和第4行)时，到目前为止一切都很好，但是当我们将表数据更改为只有2行的数组时，表将被重新呈现，但仍然显示第二个页面(因为我们的newData只包含2行，而rowsPerPage是2行)，这是空的。

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

我希望我说得够清楚，我怎样才能解决这个问题？

Answer 1

在最新版本的库中，这似乎是一个有待解决的问题。如果您可以选择将库降级到更低的版本，那么您的代码在2.0.0 of mui-datatables中运行得很好。

Answer 2

我也有过类似的问题。在我的例子中，警告是在我的应用程序处于加载状态时生成的。在加载数据时，我的记录计数=0导致页面支柱验证器抛出警告。

我找到了解决这个问题的两种方法：

1.在加载阶段期间隐藏分页

这应该可以消除警告，但当页面加载时，可能会通过闪烁使UI感到“简陋”。

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

这是我最喜欢的解决方案，允许我在加载页面时继续显示分页控件。在短短的加载期间，分页信息并不准确，但我发现这比闪烁更有利。

为了达到预期的结果，我创建了一个常量，将一些逻辑传递到表组件的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} />

我发现了关于这些解决方案的很好的讨论-- 在GitHub上

Answer 3

同样的问题，我也不想搞砸这个版本，所以我想出了一个办法：

Math.min(count, pageIndex)完成了page道具的戏法

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