使用react-table搭配react-window时单选按钮滚动后丢失选中状态如何解决

问题根本原因 #

react-window 采用虚拟滚动机制，仅渲染可视区域内的DOM节点，超出可视范围的节点会被直接销毁或复用。如果选中状态存储在行组件内部状态、或是直接绑定在DOM属性上，当行滚动出可视区后状态就会丢失，滚回重新渲染时也无法恢复。

修复方案 #

• 第一步：将所有选中状态提升到表格上层组件统一管理，不要将选中状态存储在行组件内部。已经在全局存储的选中行ID可直接用于判断选中状态，不需要额外在行内维护选中相关的state。
• 第二步：渲染单选/复选框时，直接用全局选中状态和当前行ID做匹配判断checked值，不要依赖行内状态。核心代码示例如下：

// 上层组件统一维护选中状态
const [selectedRowId, setSelectedRowId] = useState(null);

// 行选中切换逻辑
const toggleRowSelect = (rowId) => {
  setSelectedRowId(prev => prev === rowId ? null : rowId);
};

// 行组件内渲染单选按钮的代码
<input
  type="radio"
  name="rowSelect"
  checked={row.original.id === selectedRowId}
  onChange={() => toggleRowSelect(row.original.id)}
/>

• 第三步：给react-window的列表组件设置稳定的唯一key，禁止用索引作为key，避免节点复用时状态错乱。配置示例如下：

<FixedSizeList
  itemCount={rows.length}
  itemSize={35}
  width={tableWidth}
  height={tableHeight}
  // 用每行的唯一ID作为key，确保节点复用逻辑正确
  itemKey={(index) => rows[index].original.id}
>
  {/* 原有行渲染逻辑 */}
</FixedSizeList>

内容的提问来源于stack exchange，提问作者Ricardo Sanchez