Question

我正在使用Antd Table组件，我已通过以下代码绑定数据。第一页正确加载了数据，但是当我移至第二页时，它显示的是“无数据”。我已经调试了代码，并试图找出问题，并且发现到达的数据也处于渲染状态，但是不知道为什么不绑定它。它在本地主机上很喜欢，但是当我部署到服务器时，它无法工作。码： enter image description here

屏幕截图：： enter image description here

Answer 1

已解决！

我在antd表的分页选项中添加了电流（current：pagination.current）

<Table
    size={'small'}
                            scroll={{ x: 370 }}
                            rowKey={record => record.template_id}
                            columns={columns}
                            dataSource={roleTemplateData}
                            pagination={{ pageSize: pagination.pageSize, pageSizeOptions: pageSizeOptions, showSizeChanger: true, total: pagination.total, position: position, current:pagination.current }}
                            loading={loading}
                            onChange={this.handleTableChange}
                        />

谢谢。

Answer 2

针对将来可能会遇到此问题的人（我也遇到了问题并已解决）：

您可能将当前的pageindex和pagesize存储在Redux中。

如果您有例如：

30个结果
页面大小为10
您在第3页上

现在，您将页面大小更改为100（当然，您将只有1页），那么您的redux pageindex仍为3，尽管只有一页，您仍尝试访问第3页。

这会导致此错误。

解决方案：

const pagination = {
  position: ['bottomCenter'],
  showSizeChanger: true,
  showQuickJumper: true,
  onChange: (page) => {
    dispatchFns.setConfig('currentPage', page);
  },
  onShowSizeChange: (_, pPageSize) => {
    dispatchFns.setConfig('currentPage', 1); // this is the necessary line to fix the bug
    dispatchFns.setConfig('pageSize', pPageSize);
  },
  total: itemsToShow.length,
  current: currentPage,
  pageSize,
};

// currentPage comes from Redux
// pageSize comes from Redux

移至第二页时，Antd表分页显示无数据

2 个答案: