react 使用ant design table组件进行批量操作后复选框残留问题

问题遇到的现象和发生背景

我做的是一个用户管理系统,使用的ui框架是 ant design,用的react框架,当我执行批量操作时,批量禁用账号

img


然后执行ajax后,重新请求当前页面数据,发现数据改变了,但是复选框还是残留着

img

我的解答思路和尝试过的方法

通过上网查找方法,rowSelection方法下有一个API是selectedRowKeys,都说执行更新时将它置空,
然后也有说如果有selectedRows方法,也置空,我都在更新数据时将其置空了

img


再次进行批量启用时,显示数据已经为[]了,发现页面还是残留着复选框.

img


我也将rowSelection方法下的selectedRowKeys赋给声明的useState了

用什么方法才可以更新数据后清空复选框?

<template>
  <a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'name'">
        <a>{{ text }}</a>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import type { TableProps, TableColumnType } from 'ant-design-vue';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
}

const columns: TableColumnType<DataType>[] = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];
const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: 99,
    address: 'Sidney No. 1 Lake Park',
  },
];

export default defineComponent({
  setup() {
    const rowSelection: TableProps['rowSelection'] = {
      onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      getCheckboxProps: (record: DataType) => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
      }),
    };

    return {
      data,
      columns,
      rowSelection,
    };
  },
});
</script>

https://www.antdv.com/components/table-cn/#components-table-demo-row-selection

react文档
https://ant.design/components/table-cn/