antd表格重新刷新选中项(清除选中缓存)

不加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 (
      
); } } export default QueryUser;

你可能感兴趣的:(antd表格重新刷新选中项(清除选中缓存))