解决React无限滚动组件在初始内容不足时无法加载更多的问题

import InfiniteScroll from 'react-infinite-scroller-component';

function MyBookList({ sfarim, loadMoreSfarim, checkRemaining, handleFilter }) {
  return (
    <InfiniteScroll
      className="my-2 flex flex-col gap-5"
      dataLength={sfarim.length} // sfarim是已加载的原始数据
      next={loadMoreSfarim}
      hasMore={checkRemaining()} // 检查是否还有更多数据
      loader={<div key="loader">Loading...</div>}
      endMessage={<div key="end">That's it</div>}>
      {handleFilter(sfarim)} {/* 在这里过滤并渲染 */}
    </InfiniteScroll>
  );
}

import React, { useEffect, useState, useCallback } from 'react';
import InfiniteScroll from 'react-infinite-scroller-component';

function MyBookList({ initialSfarim, totalSfarimCount, fetchMoreBooks, filterKeyword }) {
  const [sfarim, setSfarim] = useState(initialSfarim); // 假设sfarim是组件内部状态
  const [hasMore, setHasMore] = useState(true); // 控制InfiniteScroll的hasMore属性

  // 模拟数据加载函数
  const loadMoreSfarim = useCallback(async () => {
    if (sfarim.length >= totalSfarimCount) {
      setHasMore(false);
      return;
    }
    // 模拟异步加载更多数据
    const newBooks = await fetchMoreBooks(sfarim.length);
    setSfarim((prevSfarim) => [...prevSfarim, ...newBooks]);
    if ((prevSfarim.length + newBooks.length) >= totalSfarimCount) {
      setHasMore(false);
    }
  }, [sfarim, totalSfarimCount, fetchMoreBooks]);

  // 根据关键字过滤数据
  const handleFilter = useCallback((books) => {
    return books
      .filter((book) =>
        book.title.toLowerCase().includes(filterKeyword.toLowerCase()) ||
        book.category.toLowerCase().includes(filterKeyword.toLowerCase()) ||
        book.author.toLowerCase().includes(filterKeyword.toLowerCase())
      )
      .map((book) => <div key={book.id}>{book.title}</div>); // 假设SeferEntry是简单的div
  }, [filterKeyword]);

  useEffect(() => {
    function checkScrollable() {
      // 获取文档的滚动高度和可视区域高度
      const { scrollHeight, clientHeight } = document.documentElement;
      // 判断内容是否可滚动
      const isContentScrollable = scrollHeight > clientHeight;

      // 如果当前内容不可滚动，且仍有更多数据待加载，则手动触发加载
      // 注意：这里sfarim.length是所有已加载的原始数据，不是过滤后的数据
      if (!isContentScrollable && sfarim.length < totalSfarimCount) {
        loadMoreSfarim();
      }
    }

    // 组件挂载时执行一次检查
    checkScrollable();

    // 监听窗口大小变化事件，以便在窗口调整时重新检查
    window.addEventListener("resize", checkScrollable);

    // 清理函数：在组件卸载时移除事件监听器
    return () => {
      window.removeEventListener("resize", checkScrollable);
    };
    // 依赖数组：当sfarim或totalSfarimCount改变时，重新运行effect
    // loadMoreSfarim被useCallback包裹，因此是稳定的，无需放入依赖数组
  }, [sfarim, totalSfarimCount, loadMoreSfarim]);

  return (
    <InfiniteScroll
      className="my-2 flex flex-col gap-5"
      dataLength={sfarim.length} // 传递已加载的原始数据长度
      next={loadMoreSfarim}
      hasMore={hasMore}
      loader={<div key="loader">Loading...</div>}
      endMessage={<div key="end">That's it</div>}>
      {handleFilter(sfarim)} {/* 渲染过滤后的数据 */}
    </InfiniteScroll>
  );
}

// 示例用法
// function App() {
//   const [allBooks, setAllBooks] = useState([]); // 假设从API获取所有书籍
//   const [initialLoadCount, setInitialLoadCount] = useState(10);
//   const [filter, setFilter] = useState('');

//   useEffect(() => {
//     // 模拟首次加载数据
//     setTimeout(() => {
//       const mockBooks = Array.from({ length: 100 }, (_, i) => ({
//         id: i,
//         title: `Book ${i} - ${['React', 'Next.js', 'JavaScript'][i % 3]}`,
//         category: ['Tech', 'Science', 'Fiction'][i % 3],
//         author: `Author ${i % 5}`
//       }));
//       setAllBooks(mockBooks);
//     }, 500);
//   }, []);

//   const fetchMoreBooks = useCallback(async (currentLoadedCount) => {
//     return new Promise(resolve => {
//       setTimeout(() => {
//         const newBooks = allBooks.slice(currentLoadedCount, currentLoadedCount + initialLoadCount);
//         resolve(newBooks);
//       }, 300);
//     });
//   }, [allBooks, initialLoadCount]);

//   return (
//     <div>
//       <input
//         type="text"
//         placeholder="Filter books..."
//         value={filter}
//         onChange={(e) => setFilter(e.target.value)}
//         style={{ marginBottom: '20px', padding: '8px' }}
//       />
//       <MyBookList
//         initialSfarim={allBooks.slice(0, initialLoadCount)}
//         totalSfarimCount={allBooks.length}
//         fetchMoreBooks={fetchMoreBooks}
//         filterKeyword={filter}
//       />
//     </div>
//   );
// }