减少组件滚动反应？

Question

我有一个包含很多组件的列表。当第一次加载时，它显示20个(索引0- 19)组件，当我滚动它时，它将显示更多的20个组件(索引0- 39)，以此类推。当我滚动它时，是否可以只显示组件(索引20 - 39 )，然后显示(索引40 - 59)等等。

import React, {useState} from 'react';
import InfiniteScroll from "react-infinite-scroll-component";

import './App.css';


const style = {
    height: 30,
    border: "1px solid green",
    margin: 6,
    padding: 8
};



function App() {
  const [items, setItems] = useState( Array.from({length: 20}));

  const fetchMoreData = () => {
      setTimeout(()=> {
          setItems(items.concat(Array.from({length: 20})))
      }, 1500);
  };

  return (
   <div>
       <div>
           <InfiniteScroll
               dataLength={items}
               next={fetchMoreData}
               hasMore={true}
               loader={<h4>Loading...</h4>}
           >
               {items.map((i, index) => (
                   <div style={style} key={index}>
                       div - #{index}
                   </div>
               ))}
           </InfiniteScroll>
       </div>
   </div>
  );
}

export default App;

https://codesandbox.io/s/silly-silence-2rviq?file=/src/App.js:390-436

Answer 1

您正在查找虚拟列表。

看看这些模块：

• https://github.com/clauderic/react-tiny-virtual-list
• https://github.com/bvaughn/react-virtualized

react-infinite-scroll-component没有这个开箱即用的功能。

Answer 2

您正在使用concat向旧数据添加新数据，这就是为什么您的列表不断添加新数据的原因。只需使用新数据数组执行setItems操作，那么它将只显示20个当前数据

const fetchMoreData = () => {
      setTimeout(()=> {
          setItems(new Array(20))
      }, 1500);
  };