antd table 组件中的 pagination 不受控

Question

场景如下：

指定了 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>
        );
    }
}

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

Answer 1

问题：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组件里做的控制。。。。。难受

Answer 2

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

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

页码会改变的啊

Answer 3

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