减少组件滚动Reactjs

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没有开箱即用的AFAIK功能。

Answer 2

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

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