React Infinite Scroll issue - no more data fetched

Question

Hi, I'm developing a page that pulls a list of items from the sanity.io data store and is trying to display 10 items at a time using infinite scroll so that every time an item drops, 10 more items are rendered. However, the problem I'm having is that only the first 10 items are displayed and the fetchNextPages function doesn't seem to be called. I've been racking my brains on this issue for hours, any help is appreciated

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { client } from "../client";
import MasonryLayout from "./MasonryLayout";
import Spinner from "./Spinner";
import { feedQuery, searchQuery } from "../utils/data";
import InfiniteScroll from "react-infinite-scroll-component";

const Feed = () => {
  const [loading, setLoading] = useState(false);
  const { categoryId } = useParams();
  const [items, setItems] = useState(null);
  const [pages, setPages] = useState([]);
  const [firstId, setFirstId] = useState(10);
  const [lastId, setLastId] = useState(20);
  const [hasMore, setHasMore] = useState(true);

useEffect(() => {
    setLoading(true);

    if (categoryId) {
      const query = searchQuery(categoryId);
      client.fetch(query).then((data) => {
        setItems(data);
        setLoading(false);
      });
    } else {
      client.fetch(feedQuery).then((data) => {
        setItems(data);
        setLoading(false);
      });
    }
  }, [categoryId]);

  useEffect(() => {
    setPages(items?.slice(0, 10));
  }, [items]);


  const fetchNextPage = () => {
    const result = items.slice(firstId, lastId);
    setPages([...pages, ...result]);
    if (result.length===0 || result.length < 10) {
      setHasMore(false);
    }
    setFirstId(firstId 10);
    setLastId(lastId 10);
  };

  if (loading) return <Spinner message="Searching for items...!" />;
  if (!pages?.length) return <h2>No results available.</h2>;

  return (
    <InfiniteScroll
      dataLength={pages?.length}
      next={fetchNextPage}
      hasMore={hasMore}
      loader={
        <Spinner
          message="Searching for items..."
          endMessage={
            <p className="align-center font-extrabold">End of list.</p>
          }
        />
      }
    >
      <div>
        <div className="mt-4 bm-4 w-full rounded overflow-hidden shadow-lg bg-slate-50 pl-2 pr-2 pt-4 pb-4">
          <p>Some information about this … </p>
        </div>
        {pages && <MasonryLayout items={pages} />}
      </div>
    </InfiniteScroll>
  );
};
export default Feed;

 ​​

Answer 1

Hey please change your code -

const fetchNextPage = () => {
    const result = items.slice(firstId, lastId);
    setPages([...pages, ...result]);
    if (result.length===0 || result.length < 10) {
      setHasMore(false);
    }
    setFirstId(firstId + 10);
    setLastId(lastId + 10);
  };

This...because I think there is something wrong with your fetchNextPage-

const fetchNextPage = () => {
  const result = items.slice(firstId, lastId 10);
  setPages([...pages, ...result]);
  if (result.length === 0 || result.length < 10) {
    setHasMore(false);
  }
  setFirstId(lastId + 1);
  setLastId(lastId + 10);
};

Please tell me if this works. I will help you more..!