React中点击复选框表格滚动至顶部问题求助

核心原因 #

这种情况大概率是表格行的key值不稳定/不唯一，导致勾选复选框更新selection状态时，表格重渲染过程中React重新创建了所有行的DOM节点，而非更新现有节点，浏览器因此自动将滚动位置重置到表格顶部。

具体排查点及修复方案 #

• 检查表格行的key设置
  必须确保表格每行的key是唯一且固定不变的标识（比如数据项自带的唯一ID）。如果当前用了数组索引、临时动态值当key，或者key(item[link])返回的值重复/随渲染变化，React就无法识别行的身份，每次重渲染都会重建DOM。
  示例修正（假设数据项有唯一id字段）：

  {yourTableData.map(item => (
    <tr key={item.id}> {/* 用稳定唯一的id作为行key */}
      <td>
        {/* 你的复选框代码 */}
      </td>
      {/* 其他单元格内容 */}
    </tr>
  ))}
  

  若使用第三方表格组件（如Antd Table），需正确配置rowKey属性：

  <Table rowKey="id" dataSource={yourTableData} />
  

• 确认selection状态更新的稳定性
  你当前用concat和filter更新数组的方式符合React不可变更新原则，但要保证key(item[link])每次返回的是同一个值。如果这个值是动态计算的、每次渲染结果不同，不仅会导致复选框选中状态异常，还可能间接影响行的key稳定性。

• 减少不必要的重渲染
  如果表格所在的父组件在selection更新时会无意义地重渲染，可以用React.memo包裹表格组件，避免不必要的DOM重建，从而保留滚动位置：

  const MemoizedTable = React.memo(YourTableComponent);
  

额外排查方向 #

如果以上方法无效，检查表格的滚动容器是否在重渲染时被重新创建（比如滚动容器的key变化、父组件强制重建容器DOM），这种情况也会导致滚动位置丢失。

内容的提问来源于stack exchange，提问作者Alberto Lorena