React Infinite Scroll 문제 - 더 이상 데이터를 가져올 수 없습니다.

Question

안녕하세요, 저는 sanity.io 데이터 저장소에서 항목 목록을 가져오고 무한 스크롤을 사용하여 한 번에 10개의 항목을 표시하여 항목이 떨어질 때마다 10개의 항목이 더 렌더링되는 페이지를 개발 중입니다. 그런데 문제는 처음 10개 항목만 표시되고 fetchNextPages 함수가 호출되지 않는 것 같습니다. 저는 이 문제에 대해 몇 시간 동안 고민해 왔습니다. 도움을 주시면 감사하겠습니다

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

야 코드 좀 바꿔줘-

으아아아

이건..FetchNextPage에 문제가 있는 것 같아서요 -

으아아아

이게 효과가 있는지 알려주세요. 더 도와드릴게요..!