2

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

重现步骤：

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

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

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

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

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

4

3 回答 3

2

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

于 2019-06-14T08:39:46.783 回答
1

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

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

1.在加载阶段隐藏分页

这应该可以解决警告，但可能会在页面加载时通过闪烁使 UI 感觉“卡顿”。

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

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

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

// 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 上找到了关于这些解决方案的很好的讨论

于 2021-02-20T06:11:22.847 回答
0

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

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}/>
于 2022-02-16T12:27:59.013 回答