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

聖光之護

发布时间：2025-08-31 12:50:24

|

465人浏览过

|

来源于php中文网

原创

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

function MyBookList({ sfarim, loadMoreSfarim, checkRemaining, handleFilter }) {
  return (
    Loading...

在这个例子中，dataLength通常代表已加载的原始数据量。然而，handleFilter可能会大幅减少实际渲染到DOM中的元素数量。如果过滤后的元素不足以填满屏幕，无限滚动组件将无法正常工作。

Copy Leaks

AI内容检测和分级，帮助创建和保护原创内容

下载

3. 解决方案：动态检测滚动并手动触发加载

为了解决上述问题，我们需要一种机制来主动检测页面是否可滚动。如果页面不可滚动，但我们知道还有更多数据待加载，就应该手动触发数据加载。

这种机制可以通过React的useEffect钩子实现，它允许我们在组件生命周期中执行副作用，例如添加事件监听器或执行数据获取。

核心思路是：

1. 在组件挂载时和窗口大小改变时，检查当前页面的滚动状态。
2. 如果页面不可滚动（即没有滚动条），并且仍有更多数据可以加载，则手动调用数据加载函数。
3. 这个检查应该在每次sfarim（已加载数据）更新后重新运行，以应对新数据加载后可能仍然无法滚动的情况。

4. 代码实现与详解

以下是实现此解决方案的useEffect钩子代码：

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) => 
{book.title}
); // 假设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 (
    Loading...