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

时间:2019-02-17 06:55:46

标签: antd

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

屏幕截图:: enter image description here

2 个答案:

答案 0 :(得分:0)

已解决!

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

谢谢。

答案 1 :(得分:0)

针对将来可能会遇到此问题的人(我也遇到了问题并已解决):

您可能将当前的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