从挂钩状态用数组反应无限滚动

Question

我无法在我的 React 组件中设置 react-infinite-scroller。

我不想直接在我的组件中使用 loadMore 通过 API 获取数据，因为我已经从我的 IndexedDB 中获取了它。

所以我想使用我的数组 dbScans（包含对象的数组）并希望无限滚动最大。数组的 3 个项目。

我尝试创建一个 loadProducts 函数来切片和连接我想要呈现的数组，但是当我尝试在 Infinite-Scroll 组件中调用它时出现过载错误。

import React, { useEffect, useState } from 'react';
import InfiniteScroll from 'react-infinite-scroller';

export default function ProductHistory() {
  const [dbScans, setDbScans] = useState<IProductClient[]>([]);
  const [loadedProducts, setLoadedProducts] = useState([]);

  useEffect(() => {
    (async function getDataFromDB() {
      setDbScans(await db.yourScans.toArray());
    })();
  }, []);

  let productHistory = dbScans;

  // This function is not working
  const loadProducts = (page: number) => {
    const perPage = 3;
    const moreItems: any = dbScans.slice(
      page * perPage - perPage,
      page * perPage + 1
    );
    // Am I doing this right?
    setLoadedProducts(loadedProducts.concat(moreItems));
  }

  return (
    <>
      <div className="product-history">
          { productHistory.length > 0 ?

            <InfiniteScroll
              pageStart={0}
              loadMore={loadProducts(0)} // This is not working
              hasMore={true}
              loader={<div className="loader" key={0}>Loading ...</div>}
            >

              {productHistory.map((product: any) =>
                <div className="product-history__item" key={product.id}>
                  <p>{product.name}
                </div>
              )}

              </InfiniteScroll>
            : ''
          }
      </div>
    </>
  )
}

Answer 1

您应该引入一个称为 lastObjectPosition 的状态变量，它将具有无限滚动显示的最后一个对象的位置。

    const perPage = 3;
    const [lastObjectPosition , setLastObjectPosition ] = useState(0);

然后 hasMore 属性应该这样设置：

    hasMore={lastObjectPosition < dbScans.length}

最后你应该像这样修改 loadProducts 函数，

    const loadProducts = () => {
        setLoadedProducts(currentProducts => {
            return [
                ...currentProducts,
                dbScans.slice(lastObjectPosition, lastObjectPosition+perPage)
            ]
        });
        setLastObjectPosition(currentValue => {
            return currentValue + perPage
        }
    }

从挂钩状态用数组反应无限滚动

React infinite-scroll with array from hook state

reactjs

react-infinite-scroll-component

react-infinite-scroll