Question

我创建了一个最小示例sandbox来显示问题/错误

复制步骤：

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

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

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

此时，您必须点击左箭头进入页面，您将看到newData

我希望我足够清楚，如何解决此问题？

Answer 1

在最新版本的库中，这似乎是一个未解决的问题。如果您可以选择降级到较低版本的库，则您的代码可以与public class HandlerTest { @Test public void testRun() { StringBuilder str = new StringBuilder("1234"); Handler.run(str); Assert.assertEquals("34", str.toString()); } }的{{1}}版本一起正常工作。

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} />

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

Mui-datatables Material-UI：TablePagination的页面属性超出范围

2 个答案: