react-window-infinite-loader 在加载更多项目时滚动到顶部答案

【问题标题】：react-window-infinite-loader getting scrolled to top on loading more itemsreact-window-infinite-loader 在加载更多项目时滚动到顶部
【发布时间】：2021-08-23 05:24:05
【问题描述】：

我正在尝试使用 react-window-infinite-loader 进行无限滚动，并且每次加载项目时，滚动都会回到顶部。因此，如果我在列表中的 100 项并且加载了更多数据，我会回到顶部并且必须重新开始。这是我正在尝试的代码

const isItemLoaded = itemsCount => index => {
    return (itemsCount -index) > 5;
}
//arbitrary high number 
 const itemCount = 10000000;

function loader(props) => {
   const [data, setData] = useState([]);
   const loadMoreData= async () => {
      const payload = await callApi(//with proper params)
      setData(data => [...data,...payload.data]
   }

   return(
      <AutoSizer >
         {({ height, width }) => (
             <InfiniteLoader
                 isItemLoaded={isItemLoaded(leadCount)}
                 itemCount={itemCount}
                 loadMoreItems={loadMoreItems}
              >
                   {({ onItemsRendered, ref }) => (
                   <List
                      key={`${width}${height}${data.length}`}
                      height={height}
                      width={width}
                      itemCount={data.length}
                      itemSize={162}
                      onItemsRendered={onItemsRendered}
                      ref={ref}
                    >
                      {({ index, style }) => (
                      <div style={style}>
                         <DataCard
                            key={'visitor_' + index}
                            {...data[index]}
                          />
                      </div>
                     )}
                     </List>
                   )}
               </InfiniteLoader>
             )}
           </AutoSizer>
   )
}

【问题讨论】：

标签： react-window

【解决方案1】：

我发现了问题所在。我给组件的键是动态的，并且随着数据的加载（使用 data.length）而改变。它呈现了整个列表并使其滚动到顶部。提供正确的密钥解决了问题

【讨论】：