React AntDesign表批量操作时的selectedRowKeys回显选中

不知道大家是不是在AntDesign的某一个列表想要做一个批量导出或者操作的时候，发现只要选择下一页，即使选中的ids 都有记录下面，但是就是不回显

后来问了chatGPT，对方的回答是：
在Ant Design的DataTable组件中，当进行分页操作时，会重新渲染表格内容，这会导致之前选中的行数据和选中状态丢失。

于是最后想到了一个办法处理，通过onTableChange时间来控制
代码如下：

private onTableChange = (newSelectedRowKeys: string[]) => {console.log(newSelectedRowKeys);const { selectedRowKeys } = this.state;setTimeout(() => {this.dispatch(actions.tableRowSelectionChangeAction(this.tableId,map(selectedRowKeys, (value) => {return value;})));}, 300);
};private onTableRowSelectAll = (selected: boolean,selectedRows: any[],unSelectedRows: any[]
) => {const { selectedRowKeys } = this.state;if (selected) {const addRows = selectedRows.filter((item: any) => {return !selectedRowKeys.includes(item.id);});const addRowsRowIds = map(addRows, 'id');this.setState({ selectedRowKeys: [...selectedRowKeys, ...addRowsRowIds] });} else {const deleteIds: any = map(unSelectedRows, 'id');const deleteRows = selectedRowKeys.filter((item: any) => {return !deleteIds.includes(item);});this.setState({ selectedRowKeys: [...deleteRows] });}
};private onTableSelect = (record: any, selected: boolean) => {const { selectedRowKeys } = this.state;if (selected) {this.setState({selectedRowKeys: [...selectedRowKeys, record.id],});} else {this.setState({selectedRowKeys: selectedRowKeys.filter((key) => key !== record.id),});}
};

使用onTableChange 因为它是几个方法中最后一个执行的方法，也是必触发的方法，然后通过dispatch，对表的selectedRowKeys重新处理

this.dispatch(actions.tableRowSelectionChangeAction(this.tableId,map(selectedRowKeys, (value) => {return value;})));

如果对大家有帮助，留下个小爱心吧😄