解决React无限滚动在初始数据不足时无法加载的问题

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

// 假设这些是你的状态和加载函数
// const [sfarim, setSfarim] = useState([]);
// const [totalSfarim, setTotalSfarim] = useState(0); // 总数据量
// const loadMoreSfarim = useCallback(() => { /* 你的加载更多数据逻辑 */ }, []);

function YourComponent() {
  const [sfarim, setSfarim] = useState([]); // 假设已加载的数据
  const [totalSfarim, setTotalSfarim] = useState(100); // 假设总共有100条数据
  const [page, setPage] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  // 模拟加载更多数据的函数
  const loadMoreSfarim = useCallback(() => {
    if (isLoading || sfarim.length >= totalSfarim) return;

    setIsLoading(true);
    // 模拟异步数据请求
    setTimeout(() => {
      const newItems = Array.from({ length: 10 }).map((_, i) => ({
        id: sfarim.length + i,
        title: `Book ${sfarim.length + i + 1}`
      }));
      setSfarim(prev => [...prev, ...newItems]);
      setPage(prev => prev + 1);
      setIsLoading(false);
    }, 500);
  }, [isLoading, sfarim.length, totalSfarim]);

  useEffect(() => {
    function checkScrollable() {
      // 获取文档的各种高度属性
      const { offsetHeight, scrollHeight, clientHeight } = document.documentElement;

      // 判断内容是否超出视口，即是否可滚动
      // scrollHeight: 元素内容及其溢出部分的完整高度
      // clientHeight: 元素内容的可视区域高度（不包括滚动条、边框、外边距）
      // offsetHeight: 元素在布局中占用的实际高度（包括内容、内边距、边框，但不包括外边距）
      const isContentScrollable = scrollHeight > clientHeight;

      // 如果当前内容不可滚动，且仍有未加载的数据，则手动调用加载函数
      if (!isContentScrollable && sfarim.length < totalSfarim && !isLoading) {
        console.log("页面不可滚动且有更多数据，手动触发加载...");
        loadMoreSfarim();
      }
    }

    // 组件挂载时和数据更新时检查可滚动性
    checkScrollable();

    // 监听窗口大小变化事件，当窗口大小改变时重新检查
    window.addEventListener("resize", checkScrollable);

    // 组件卸载时清理事件监听器，防止内存泄漏
    return () => {
      window.removeEventListener("resize", checkScrollable);
    };
    // 依赖数组：当sfarim数组长度、totalSfarim或isLoading状态变化时重新运行effect
  }, [sfarim.length, totalSfarim, loadMoreSfarim, isLoading]); // 确保loadMoreSfarim也在依赖中

  // 模拟筛选函数 (根据实际应用调整)
  const handleFilter = (items) => {
    // 假设这里有一个搜索关键词 'book 1'
    const keyword = 'Book 1'; 
    return items
      .filter(item => item.title.toLowerCase().includes(keyword.toLowerCase()))
      .map(item => <div key={item.id} className="p-2 border-b">{item.title}</div>);
  };

  return (
    <div style={{ height: 'calc(100vh - 20px)', overflow: 'auto', border: '1px solid #ccc' }}>
      <InfiniteScroll
        className="my-2 flex flex-col gap-5"
        dataLength={sfarim.length} // 已加载数据的长度
        next={loadMoreSfarim}      // 滚动到底部时调用的函数
        hasMore={sfarim.length < totalSfarim} // 是否还有更多数据
        loader={<div key="loader" className="text-center p-2">Loading...</div>}
        endMessage={<div className="text-center p-2">That's it</div>}
        // 注意：InfiniteScroll组件本身通常需要一个可滚动的父容器
        // 如果容器本身不滚动，则需要将scrollableTarget设置为文档本身或其他滚动元素
        // scrollableTarget="your-scrollable-div-id" // 如果有特定的滚动容器
      >
        {handleFilter(sfarim)} {/* 渲染过滤后的数据 */}
      </InfiniteScroll>
    </div>
  );
}

export default YourComponent;