Reactjs 使用钩子状态的数组反应无限滚动

在我的react组件中设置

react infinite scroller

时遇到问题

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>
    </>
  )
}

我不想通过API直接在我的组件中使用

loadMore

获取数据，因为我已经从IndexedDB获取了数据

因此，我想使用我的数组

dbScans

（带对象的数组），并希望具有最多3个数组项的无限滚动

我试图创建一个

loadProducts

函数来切片和浓缩我想要渲染的数组，但是当我试图在无限滚动组件中调用它时，我遇到了重载错误

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>
    </>
  )
}

import React，{useffect，useState}来自“React”；
从“react infinite scroller”导入InfiniteScroll；
导出默认函数ProductHistory（）{
const[dbScans，setDbScans]=useState（[]）；
const[loadedProducts，setLoadedProducts]=useState（[]）；
useffect（（）=>{
（异步函数getDataFromDB（）{
setDbScans（wait db.yourScans.toArray（））；
})();
}, []);
让productHistory=dbScans；
//此功能不起作用
const loadProducts=（页码）=>{
每页常数=3；
const moreItems:any=dbScans.slice(
每页*每页-每页，
页码*每页+1
);
//我这样做对吗？
setLoadedProducts（loadedProducts.concat（更多项））；
}
返回(
{productHistory.length>0？
{productHistory.map（（产品：any）=>
{product.name}
)}
: ''
}
)
}

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

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

然后hasMore属性应设置如下：

    hasMore={lastObjectPosition < dbScans.length}

---

谢谢你的回答和帮助！您能告诉我currentProducts是什么并且将用于什么吗？currentProducts是我给出的名称。你可以叫它任何东西。可能是，当前值？它指的是loadedProducts中存在的值。非常抱歉，即使在您的帮助下，我也无法解决我的问题。由于代码已更改，我创建了一个新问题，并提到您已经帮助我解决了问题！供参考：