Table页码切换会影响到另外一个Table页码 Pagination antd

Question

比如我在第一个表格里面页面选择第七页，完后切换到另外一个表格，发现另外一个表格页码也是第七页，两个表格current值明明都是不一样的，不知道为什么会同步，下面是demo连接

链接描述

Answer 1

    const pagination_1 = {
      key:1,
      current: current_1, // 当前页数
      pageSize: 5,
      hideOnSinglePage: true,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: (total, range) => `共 ${total} 条`,
      onChange: (page) => {this.onChange(page,'current_1')},
    };
    const pagination_2 = {
      key:2,
      current: current_2,
      pageSize: 20,
      hideOnSinglePage: true,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: (total, range) => `共 ${total} 条`,
      onChange: (page) => {this.onChange(page,'current_2')},
    };

pagination配置没有 current_1、current_2 属性，你这样写相当于没有配置，所以表格就使用默认的current

Answer 2

    // 这就有些坑了啊
    const contentList = {
      tab1: <Table 
            // 这里是关键
            key=1
            columns={columns_1} 
            dataSource={data} 
            pagination={pagination_1} 
            onRow={(record,index)=>{return {onClick:(event)=>{this.onRowData(record,index)}}}} 
          />,
      tab2: <Table 
            key=2
            columns={columns_1} 
            dataSource={data} 
            pagination={pagination_2}
          />,
    };
    /*
      原因： 你两个表格用一份数据 渲染出来的dom 是一致 导致react更新dom时候复用了上一份dom 所以需要给表格加上key
    */

Answer 3

如果不设置key，即使两个table的数据不一致，渲染出来的pagination也是一个，更新的时候也会复用