【React】antd table 组件中的 pagination 不受控

场景如下：

指定了 pagination 的 current 和 total 属性。

table 组件中有 2 页数据共 11 条、默认分页每页 10 条。

当第二页的数据只有一条时，删除了此数据，pagination 的当前页码自动变成了 1 而不是当前的 2 ，current 属性并没有起作用，另外pagination 的 onChange 事件也却并未触发。

class PaginationBug extends React.Component{
constructor(props){
super(props);
this.state = {
data: [],
columns : [{
title: 'id',
dataIndex: 'id',
}, {
title: 'name',
dataIndex: 'name',
}, {
title: 'age',
dataIndex: 'age',
},{
title: '操作',
key: 'operation',
render: (text, record, index) =>
<Popconfirm title='确认删除？' okText='确认' cancelText='取消'
onConfirm={() => {
console.log(record.id);
let data = this.state.data;
data.pop();
this.setState({
data: data
}, () => {
console.log(this.state.data.length);
console.log('after delete current page: ',this.state.current);
})
}}
>
<Button >删除</Button>
</Popconfirm >
}],
current: 1,
}
}
componentWillMount(){ //初始化数据
let data = [];
for (let i = 0; i < 41; i++) {
data.push({
key: i,
id: i,
name: i,
age: i,
});
}
this.setState({
data: data
})
}
render(){
return (
<div >
<Table
pagination={{
total: this.state.data.length,
current:　this.state.current,
onChange: (page, pageSize) => {
console.log('current page: ', page)
this.setState({
current: page
})
}
}}
bordered={true}
columns={this.state.columns}
dataSource={this.state.data}
rowKey={record => record.id}
/>
</div>
);
}
}

【React】antd table 组件中的 pagination 不受控

删除某页最后一条数据后，指定当前页码的 current 值并未改变， 但是显示的页码已经减了一。

【React】antd table 组件中的 pagination 不受控

回答

问题：this.state.current与table 内部使用的pagination展示出的页码不一致
结论：ant-design源码Table.tsx中818行, 699行

      <Pagination
        key="pagination"
        {...pagination}
        className={classNames(pagination.className, `${this.props.prefixCls}-pagination`)}
        onChange={this.handlePageChange}
        total={total}
        size={size}
        current={this.getMaxCurrent(total)}
        onShowSizeChange={this.handleShowSizeChange}
      />
      ...
    //计算maxCurrent
    getMaxCurrent(total) {
        const { current, pageSize } = this.state.pagination;
        if ((current - 1) * pageSize >= total) {
          return Math.floor((total - 1) / pageSize) + 1;
        }
        return current;
  }

传给Pagination是经过计算最大current的，所以展示出来的会自动选中最后一项，就与this.state.current不一致了。

如果直接用Pagination组价，而不是给Table传属性，是不会那样的。

查了半天，以为是Pagination组件里做的控制。。。。。难受

【React】antd table 组件中的 pagination 不受控

你删除数据之后需要再发请求查一遍数据才行

//render里边
<Pagination 
    style={style.Pagination} 
    current={this.page.pageNum} 
    pageSize={this.page.pageSize} 
    total={store.totalCount} 
    onChange={this.changePage.bind(this)}
 />

//初始化
constructor(props){
    super(props);
    this.page = {pageNum: 1, pageSize: 10};
    //this.data = {};
    //props.store.selectUsers(this.data,this.page);
}

//onChange事件
changePage(page){
    this.page.pageNum = page;
    //this.props.store.selectUsers(this.data,this.page);
}

页码会改变的啊

我也遇到这个问题,看不到啊

以上是 【React】antd table 组件中的 pagination 不受控 的全部内容， 来源链接： utcz.com/a/73786.html

回到顶部