React Infinite Scroll の問題 - データが取得されなくなりました

Question

こんにちは。sanity.io データ ストアからアイテムのリストを取得するページを開発しており、アイテムがドロップされるたびにさらに 10 個のアイテムが表示されるように、無限スクロールを使用して一度に 10 個のアイテムを表示しようとしています。 。ただし、私が抱えている問題は、最初の 10 項目のみが表示され、fetchNextPages 関数が呼び出されないようであることです。私はこの問題について何時間も頭を悩ませてきました。助けていただければ幸いです

import React, { useState, useEffect } from "react";
「react-router-dom」からインポート { useParams };
import { client } from "../client";
"./MasonryLayout" から MasonryLayout をインポートします。
「./Spinner」からスピナーをインポートします。
import { feedQuery, searchQuery } from "../utils/data";
「react-infinite-scroll-component」から InfiniteScroll をインポートします。

const フィード = () => {
  const [ロード中、setLoading] = useState(false);
  const { categoryId } = useParams();
  const [items, setItems] = useState(null);
  const [ページ, setPages] = useState([]);
  const [firstId, setFirstId] = useState(10);
  const [lastId, setLastId] = useState(20);
  const [hasMore, setHasMore] = useState(true);

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

    if (カテゴリID) {
      const クエリ = searchQuery(カテゴリId);
      client.fetch(クエリ).then((データ) => {
        setItems(データ);
        setLoading(false);
      });
    } それ以外 {
      client.fetch(feedQuery).then((data) => {
        setItems(データ);
        setLoading(false);
      });
    }
  }, [カテゴリID]);

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


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

  if (読み込み中) return <Spinner message="アイテムを検索中...!" />;
  if (!pages?.length) return <h2>結果はありません。</h2>;

  戻る （
    <InfiniteScroll
      dataLength={ページ?.長さ}
      next={fetchNextPage}
      もっとある={もっとある}
      ローダー={
        <スピナー
          message="アイテムを検索しています..."
          endMessage={
            <p className="align-center font-extrabold">リストの終わり。</p>
          }
        />
      }
    >
      <div>
        <div className="mt-4 bm-4 w-fullrounded overflow-hiddenshadow-lg bg-slate-50 pl-2 pr-2 pt-4 pb-4">
          <p>これに関するいくつかの情報 … </p>
        </div>
        {ページ && <MasonryLayout items={ページ} />}
      </div>
    </InfiniteScroll>
  );
};
デフォルトのフィードをエクスポートします。

 

Answer 1

コードを変更してください -

const fetchNextPage = () => {
    const result = items.slice(firstId, lastId);
    setPages([...ページ, ...結果]);
    if (結果の長さ===0 || 結果の長さ < 10) {
      setHasMore(false);
    }
    setFirstId(firstId + 10);
    setLastId(lastId + 10);
  };

これは...fetchNextPage-

に何か問題があると思うからです

const fetchNextPage = () => {
  const result = items.slice(firstId, lastId 10);
  setPages([...ページ, ...結果]);
  if (結果の長さ === 0 || 結果の長さ < 10) {
    setHasMore(false);
  }
  setFirstId(lastId + 1);
  setLastId(lastId + 10);
};

これが機能するかどうか教えてください。もっとお手伝いします..!