Reagieren Sie auf das Infinite Scroll-Problem – es werden keine Daten mehr abgerufen
Hallo, ich entwickle eine Seite, die eine Liste von Elementen aus dem Datenspeicher von sanity.io abruft und versucht, 10 Elemente gleichzeitig mit unendlichem Scrollen anzuzeigen, sodass jedes Mal, wenn ein Element abgelegt wird, 10 weitere Elemente gerendert werden. Das Problem, das ich habe, ist jedoch, dass nur die ersten 10 Elemente angezeigt werden und die Funktion fetchNextPages nicht aufgerufen zu werden scheint. Ich habe mir stundenlang den Kopf zu diesem Thema zerbrochen, ich wäre für jede Hilfe dankbar
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;
