0

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>
   )
}
4

1 に答える 1

0

私は問題を理解しました。私がコンポーネントに与えていたキーは動的であり、データの読み込み(data.lengthを使用)で変更されました。これにより、リスト全体がレンダリングされ、上部にスクロールされました。適切なキーを与えると問題が修正されました

于 2021-08-24T17:34:58.967 に答える