react-window-infinite-loader加载更多时滚动条自动回到顶部问题求助

List组件绑定的key属性包含了data.length，每次加载新数据后data.length会更新，React会将其识别为全新组件，销毁原有实例重新渲染，滚动位置就会被重置到顶部。

调整List组件的key属性，移除data.length变量，仅保留和容器尺寸相关的参数，只有宽高变化时才需要重新渲染List：

<List
  // 仅保留宽高作为key的计算变量
  key={`${width}${height}`}
  height={height}
  width={width}
  itemCount={data.length}
  itemSize={162}
  onItemsRendered={onItemsRendered}
  ref={ref}
>

• 修正isItemLoaded的判断逻辑，避免加载判断异常：

const isItemLoaded = loadedCount => index => index < loadedCount;

// InfiniteLoader 绑定isItemLoaded时传入当前已加载的data长度
<InfiniteLoader
  isItemLoaded={isItemLoaded(data.length)}
  itemCount={itemCount}
  loadMoreItems={loadMoreData}
>

• 替换DataCard的key为数据唯一标识，不要使用数组下标，避免列表项渲染错乱：

<DataCard
  // 替换为数据中实际的唯一字段，比如记录id、用户id等
  key={'visitor_' + data[index].id}
  {...data[index]}
/>

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