不加rowkey对比1.jpg

如上如所示，选中项再打开页面仍然存在
从antd官网复制的下面方法，点击其他按钮刷新selectedRowKeys发现清除不了选中项的缓存

注意：不是点击第二页重复勾选的问题，是再次打开页面后有缓存的问题，重复勾选的问题我的下一篇文章会有介绍

错误代码如下：

const rowSelection = { 
    onChange: (selectedRowKeys) => {
        this.setState({
            selectedRowIds : selectedRowKeys.map(Number),
            selectedRowKeys 
        })
    },
};
  clearData = () => {
    this.setState({ selectedRowKeys: [] }); //清空发现没有任何效果
  }

最后查了一下，发现是selectedRowKeys的问题！！！要在rowSelection中onchange外面加上selectedRowKeys这个！！

正确代码如下：

//提前在state中定义状态
this.state={
    selectedRowKeys:[],
}


const {selectedRowKeys } = this.state;
    const rowSelection = { 
    selectedRowKeys, //注意：就是这行代码起了作用！！！！！必须加上！！
    onChange: (selectedRowKeys) => {
    this.setState({
    selectedRowIds : selectedRowKeys.map(Number),
    selectedRowKeys 
    })
    },
};

//当清楚缓存的时候只需要让selectedRowKeys为空就可以
  clearData = () => {
    this.setState({ selectedRowKeys: [] });
  }

完整的demo版本的如下(可以直接放在react项目中直接看效果的)：

import { Table, Button } from 'antd';
import React from 'react';
const columns = [{
  title: 'Name',
  dataIndex: 'name',
}, {
  title: 'Age',
  dataIndex: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
}];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

class QueryUser extends React.Component {
  state = {
    selectedRowKeys: []
  };


  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  }
  clearData = () => {
    this.setState({ selectedRowKeys: [] });
  }

  render() {
    const {selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          <Button
            type="primary"
            onClick={this.clearData}
          >
            Reload
          </Button>
        </div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
      </div>
    );
  }
}

export default QueryUser;