Reagieren Sie auf das Infinite Scroll-Problem – es werden keine Daten mehr abgerufen

Question

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;

 ​​

Answer 1

嘿，请更改您的代码-

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

这个..因为我认为你的 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);
};

请告诉我这是否有效。我会帮助你更多..！