如何解决Electron应用中React Table更新时自动滚顶、滚动锁定问题

问题根因与修复方案 #

一、表格自动滚动到顶部的核心修复 #

你遇到的滚动跳顶问题90%的场景是列表渲染的key使用错误导致的：

• 你当前使用index作为<Tr>的key，React做DOM diff时如果列表数据顺序、长度发生变化，会判定所有行元素都是新的，直接卸载重绘整个表格，相当于表格重新加载，自然会回到顶部。
• 你代码里多余的JSX大括号包裹（比如{<Table>}、{<Tbody>}）也可能导致React误判元素需要重绘。

修复代码：

// key替换为每个item的唯一业务标识（比如id、uuid等），不要用index
const tableContent = listItem.map((item: any) => {
  return (
    <Tr key={item.id} className="section">
      <Td>{item.item1}</Td>
      <Td>
        <Icon
          onClick={() => exampleFunction()}
        />
      </Td>
    </Tr>
  );
});

return (
  <Div className="round-card page-content-table table-responsive padding-20">
    {/* 去掉多余的{}包裹，避免不必要的元素重绘 */}
    <Table className="table table-striped">
      <Thead>
        <Tr>
          <Th>TH1</Th>
          <Th>TH2</Th>
        </Tr>
      </Thead>
      <Tbody>{tableContent}</Tbody>
    </Table>
  </Div>
)

修改完成后绝大多数场景下滚动跳顶问题会直接消失，不需要额外写滚动位置保存逻辑。

二、自定义滚动保存逻辑的问题修复 #

如果你的场景特殊（比如数据全量替换必须重绘表格），需要保留滚动保存逻辑，你当前的代码存在3个明显问题：

1. 闭包陷阱：setScrollPosition是异步更新，你调用后同步读取scrollPostion拿到的是更新前的旧值，存储的位置本身就不正确
2. 用useState存滚动位置会触发不必要的组件重渲染，反而加剧卡顿
3. 没有限制恢复滚动的时机，每次渲染都强制设置滚动位置，就会覆盖用户的滚动操作，导致滚动被固定

优化后可直接使用的代码：

const TableRef = useRef<HTMLDivElement>(null);
// 用ref存滚动位置，不会触发重渲染，也没有闭包问题
const scrollPositionRef = useRef(0);

// 只在列表数据更新完成后，执行一次滚动位置恢复，不会干涉用户平时的滚动操作
useEffect(() => {
  if (TableRef.current) {
    TableRef.current.scrollTop = scrollPositionRef.current;
  }
// 依赖项仅为列表数据，只有数据更新时才触发恢复
}, [listItem]);

// 滚动时直接更新ref，同步存储最新位置
const scrollEvent = (e: React.UIEvent<HTMLDivElement>) => {
  scrollPositionRef.current = e.currentTarget.scrollTop;
};

// 给外层滚动容器绑定ref和滚动事件
return (
  <Div 
    className="round-card page-content-table table-responsive padding-20"
    ref={TableRef}
    onScroll={scrollEvent}
  >
    <Table className="table table-striped">
      {/* 表格内部内容同上 */}
    </Table>
  </Div>
)

如果需要跨页面刷新保留滚动位置，再额外加localStorage的读写逻辑即可，不需要和滚动事件、state更新绑定。

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