如何使用带有钩子的React Infinite Scroll

Question

第一次使用react-infinite-scroll-component，我很难让它按预期工作。目前，它在获取前2个项目后调用loadMore方法(这正是我想要的(，但随后它加载了接下来的3个项目(它应该只加载2个(，并且不再调用loadMore方法。有人看到我哪里出错了吗？

我将itemsPerPage作为道具传递，例如10，因此我可以将numberOfItemsToDisplay设置为10，然后当调用loadMore时，我可以用itemsPerPage值增加numberOfItemsToDisplay。

const dataList = [
{ src: 'http://ww3.sinaimg.cn/mw690/62aad664jw1f2nxvya0u2j20u01hc16p.jpg' },
{ src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvyo52qj20u01hcqeq.jpg' },
{ src: 'http://ww2.sinaimg.cn/mw690/62aad664jw1f2nxvz2cj6j20u01hck1o.jpg' },
{ src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvzfjv6j20u01hc496.jpg' },
{ src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxw0e1mlj20u01hcgvs.jpg' },
{ src: 'http://ww4.sinaimg.cn/mw690/62aad664jw1f2nxw0p95dj20u01hc7d8.jpg' },
{ src: 'http://ww3.sinaimg.cn/mw690/62aad664jw1f2nxvya0u2j20u01hc16p.jpg' },
{ src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvyo52qj20u01hcqeq.jpg' },
{ src: 'http://ww2.sinaimg.cn/mw690/62aad664jw1f2nxvz2cj6j20u01hck1o.jpg' },
{ src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvzfjv6j20u01hc496.jpg' },
{ src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvyo52qj20u01hcqeq.jpg' },
{ src: 'http://ww2.sinaimg.cn/mw690/62aad664jw1f2nxvz2cj6j20u01hck1o.jpg' },
{ src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvzfjv6j20u01hc496.jpg' },
{ src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxw0e1mlj20u01hcgvs.jpg' },
{ src: 'http://ww4.sinaimg.cn/mw690/62aad664jw1f2nxw0p95dj20u01hc7d8.jpg' },
{ src: 'http://ww1.sinaimg.cn/mw690/62aad664jw1f2nxvzfjv6j20u01hc496.jpg' },
];
const LazyList = ({ itemsPerPage }) => {
const [numberOfItemsToDisplay, setNumberOFItemsToDisplay] = useState(itemsPerPage);
const [hasMore, setHasMore] = useState(true);
const loadItems = () => {
let items = numberOfItemsToDisplay;
if (items >= dataList.length) {
setHasMore(false);
return;
}
setNumberOFItemsToDisplay((items += numberOfItemsToDisplay));
};
return (
<div data-testid="LazyList" className={styles['pt-lazyList']}>
<h1>test</h1>
<InfiniteScroll
dataLength={numberOfItemsToDisplay}
next={loadItems}
hasMore={hasMore}
loader={<h4>Loading...</h4>}
>
{dataList.map((item, index) => {
const id = index;
return <img key={id} src={item.src} alt="placeholder" className={styles['pt-lazyList--image']} />;
})}
</InfiniteScroll>
</div>
);
};

任何帮助都将不胜感激！感谢

Answer 1

可能不是最干净的答案，但通过不映射整个dataList并基于numberOfItemsToDisplay值创建项目数组来实现它：

const [numberOfItemsToDisplay, setNumberOFItemsToDisplay] = useState(itemsPerPage);
const [hasMore, setHasMore] = useState(true);
const list = [];
for (let i = 0; i < numberOfItemsToDisplay; i += 1) {
list.push(dataList[i]);
}
const loadItems = () => {
let items = list.length;
if (list.length >= dataList.length) {
setHasMore(false);
return;
}
setNumberOFItemsToDisplay((items += itemsPerPage));
};