React infinite-scroll with array from hook state

Question

I'm having troubles to set up react-infinite-scroller within my React component.

I do not want to fetch data via an API directly in my component with loadMore because I already got it from my IndexedDB.

So I want to use my Array dbScans (array with objects) and want to have infinite scroll with max. 3 items of the array.

I tried to create a loadProducts function to slice and concate my array that I want to render but I am getting overload errors, when I try to call it in the Infinite-Scroll component.

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

score 2 · Accepted Answer · answered Apr 17 '20 at 17:01

2

You should introduce a state variable called as lastObjectPosition which will have the position of the last object that is being shown by the infinite scroll.

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

And then hasMore attribute should be set like this:

    hasMore={lastObjectPosition < dbScans.length}

And finally you should modify loadProducts function like this,

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

answered Apr 17 '20 at 17:01

Venkat

50
4

Thank you for your answer and help! Can you tell me what `currentProducts` is and will be used for? – mrks Apr 20 '20 at 08:39
1

currentProducts is the name I gave. You can call it any thing. May be, currentValues? It refers to the values that are present in loadedProducts. – Venkat Apr 20 '20 at 08:51
I am really sorry but even with your help I can not resolve my issue. As the code has changed, I created a new question and mentioned you that you already helped my out! FYI: https://stackoverflow.com/questions/61321704/react-infinite-scroll-loads-data-right-from-beginning – mrks Apr 20 '20 at 11:47

React infinite-scroll with array from hook state

1 Answers1