antd-Table 的大坑

我在使用Table 的选择和操作这个用法的时候，会出现第一页全选了什么，第二页也选了什么。在我选择了第二页之后，输出selectedRowKeys，得到的数据和选择第一页,废话不多说，看图：

第二页和第一页一样，就不放了，下面是selectedRowKeys的输出

下面是代码：

 //代码：
const columns = [{
   title: '优惠券名称',
   dataIndex: 'name',
   key: 'name',
 }, {
   title: '类型',
   dataIndex: 'type',
   key: 'type',
 }, {
   title: '面值及门槛',
   dataIndex: 'amountUseThreshold',
   key: 'amountUseThreshold',
 }, {
   title: '剩余/总量',
   dataIndex: 'oddAccount',
   key: 'oddAccount',
 }];
 
const data = [];
  const data = items.map(item => {
    var coupon = {};
	coupon.name = item.name;
    coupon.type = COUPON_TYPE[item.type];
    coupon.amountUseThreshold = item.amount+','+item.name;
    coupon.oddAccount = (item.count-item.releasedCount)+'/'+item.count;
    return coupon
  })

const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const rowSelection = {
   selectedRowKeys,
   onChange: handleSelectChange,
  };
  
function handleSelectChange(selectedRowKeys) {
    setSelectedRowKeys(selectedRowKeys);
   	console.log(selectedRowKeys,'selectedRowKeys')
}

<Table
  rowSelection={rowSelection}
  columns={columns}
  dataSource={data}
  style={{width:'100%'}}
  pagination={{
    size: "small",
    showQuickJumper: true,
    pageSize:5,
  }}
/>

解决：

第一种办法： 在 data 的每个对象中，添加一个 key，比如在我的代码中：

const data = items.map(item => {
 var coupon = {};
	//添加下面一行代码
   	coupon.key = item.couponId；
	//其他省略
...
  })

第二种办法：在 Table 的属性中添加rowKey这个属性，比如在我的代码中：

<Table
 rowSelection={rowSelection}
   columns={columns}
   dataSource={data}
   //添加下面一行代码，另外要说的是 name 是 data 每个对象中的一个属性，这个自己可另设的，而写了这一行代码后，selectedRowKeys输出会变成这个数据的 name，而不会是这个数据的 index
   rowKey={record => record. name}
   pagination={{
     size: "small",
     showQuickJumper: true,
     pageSize:3,
   }}
   />
``