React Infinite Scroll 문제 - 더 이상 데이터를 가져올 수 없습니다.
안녕하세요, 저는 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;
