表格分页切换后选中行状态丢失，修改逻辑仍无效求助

问题核心是你把选中状态和当前页数据绑定了——每次切换分页，表格数据更新，原listRowKeys只保存当前页的选中ID，旧分页的选中记录自然丢失。你想新增state保存全局选中状态的思路是对的，但数组合并方式写错了，导致状态结构混乱。

正确实现思路 #

需要一个独立于当前页数据的全局状态，存储所有分页中被选中的行ID；同时每次渲染表格时，动态计算当前页应该显示的选中行（即全局选中ID中存在于当前页数据的部分）。

代码实现 #

// 定义全局选中ID列表，存储所有分页的选中行
const [selectedAllRowKeys, setSelectedAllRowKeys] = useState([]);

// 假设currentPageData是当前分页的表格数据数组，每个元素包含id字段
const rowSelection = {
  // 动态计算当前页的选中行：从全局列表里筛选出当前页存在的ID
  selectedRowKeys: currentPageData.map(item => item.id).filter(id => selectedAllRowKeys.includes(id)),
  onChange: (currentSelectedKeys) => {
    // 拿到当前页所有行的ID集合
    const currentPageIds = new Set(currentPageData.map(item => item.id));
    
    // 更新全局选中列表：
    setSelectedAllRowKeys(prev => {
      // 先把当前页的ID从全局列表中移除（因为当前页的选中状态已经更新）
      const filteredPrev = prev.filter(id => !currentPageIds.has(id));
      // 再把当前页新的选中ID加进去
      return [...filteredPrev, ...currentSelectedKeys];
    });
  },
};

为什么之前的写法无效 #

你之前的代码：

setListRowKeys([...selectedRowKeys, selectedCloneList]);

这里把selectedCloneList（数组）直接拼进了selectedRowKeys，导致最终的listRowKeys变成了嵌套数组（比如[3, [1,2]]），完全不是正确的ID集合，自然无法正确显示选中状态。

额外优化（支持当前页全选） #

如果需要支持全选当前页，可以在rowSelection里补充onSelectAll逻辑：

onSelectAll: (selected, selectedRows) => {
  const selectedIds = selectedRows.map(item => item.id);
  const currentPageIds = new Set(currentPageData.map(item => item.id));
  
  setSelectedAllRowKeys(prev => {
    const filteredPrev = prev.filter(id => !currentPageIds.has(id));
    return selected ? [...filteredPrev, ...selectedIds] : filteredPrev;
  });
}

内容的提问来源于stack exchange，提问作者Pablo Neruda