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

【问题标题】：How to use React Infinite Scroll with hooks如何使用带有钩子的 React Infinite Scroll
【发布时间】：2020-08-06 21:28:07
【问题描述】：

第一次使用 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>
);
};

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

【问题讨论】：

在加载时你正在增加显示长度的项目不应该是一个常数
我想要将 itemsPerPage 添加到 itemsToDisplay，因此当调用 loadItems 时，它每次都会递增。
你在哪里添加 itemsPerPage 你这样做而不是 setItemsToDisplay((items += itemsToDisplay)) 每次调用 loadmore 时都会增加该列表的长度
还有 itemsToDisplay.length 这有点令人困惑，这里是显示数组或计数的项目，因为我看到你在 items += itemsToDisplay 下面做了这个，数据和你如何操作有问题它
已更新代码 sn-p 以尝试使其更清晰。

标签： javascript reactjs react-hooks infinite-scroll react-infinite-scroll-component

【解决方案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));
    };

【讨论】：