【发布时间】：2022-08-05 23:19:37
【问题描述】：
我目前正在使用 react-virtualized InfiniteLoader 组件来滚动可能一直可变的元素列表。 这是我现在的组件：
<VirtualizedInfiniteLoader isRowLoaded={isRowLoaded} loadMoreRows={loadMoreRows} rowCount={rowCount}>
{({ onRowsRendered, registerChild }) => (
<AutoSizer>
{({ width, height }) => (
<List
key={`${width}${height}${rowCount}`}
height={height - headerHeight}
onRowsRendered={onRowsRendered}
scrollToIndex={scrollToIndex}
scrollToAlignment={scrollToAlignment}
ref={registerChild}
rowCount={rowCount}
rowHeight={rowHeight}
rowRenderer={rowRenderer}
width={width}
onScroll={onListScroll}
/>
)}
</AutoSizer>
)}
</VirtualizedInfiniteLoader>
我在容器中使用它：
renderInfiniteLoader = currentStatus => {
const { cache, headerHeight } = this.state;
const { scrollToIndex, params, allTasks, selectedFilterFields, searchFilters } = this.props;
const list = allTasks[currentStatus];
console.log(list.length, params);
return (
<InfiniteLoaderWrapper
diffHeight={marginBottomToAdd({ searchFilters, selectedFilterFields, customerID: params.customerID })}
ref={this.cardsContainer}
>
<InfiniteLoader
loadMoreRows={options => this.loadMoreRows(options, status)}
rowRenderer={this.renderTasks(list, currentStatus)}
isRowLoaded={this.isRowLoaded(list)}
scrollToIndex={scrollToIndex}
scrollToAlignment=\"start\"
rowCount={list.length + 1}
headerHeight={150}
deferredMeasurementCache={cache}
rowHeight={cache.rowHeight}
onListScroll={this.onInfiniteLoaderScroll}
/>
</InfiniteLoaderWrapper>
);
};
这里的问题是每次我向下滚动并且如果我滚动太快会出现加载器，页面滚动到顶部的第一个元素。
道具scrollToIndex 似乎每次都是0，所以这可能就是问题所在。
如果我删除该道具，滚动可以正常工作，但会出现另一个问题：
我可以单击列表的元素以转到详细信息页面，如果我回来，我希望位于列表的正确位置，但我在顶部（再次，因为 scrollToIndex 为 0）。
传递给 scrollToIndex 以始终处于正确位置的正确值是什么？
我可以看到某些版本的 react-virtualized 中存在此错误，但找不到任何解决方法。
提前致谢！