在React函数式组件中实现带分页和定时更新的无限滚动

import { arr } from "./utils"; // 假设这是你的原始数据源
import InfiniteScroll from "react-infinite-scroll-component";
import { useState, useEffect } from "react";

export default function App() {
  const [isLoading, setLoading] = useState(false); // 控制加载状态，尽管在此特定解决方案中未直接使用
  const [hasMore, setHasMore] = useState(true);   // 控制是否还有更多数据可加载
  const [first10, setFirst10] = useState(arr.slice(0, 10)); // 存储当前已加载并显示的数据
  // ...
}

// ...
  useEffect(() => {
    // 定义一个变量来跟踪下一次切片的起始索引
    let insertAt = 10;

    // 设置定时器，每5秒执行一次
    const interval = setInterval(() => {
      // 如果已经加载了所有数据，清除定时器并设置hasMore为false
      if (insertAt >= arr.length) {
        clearInterval(interval);
        setHasMore(false);
        return;
      }

      // 使用函数式更新来安全地更新first10状态
      setFirst10((prevFirst10) => {
        // 获取下一段10条数据
        const nextSlice = arr.slice(insertAt, insertAt + 10);
        // 更新下一次切片的起始索引
        insertAt += 10;
        // 返回一个新数组，包含之前的数据和新加载的数据
        return [...prevFirst10, ...nextSlice];
      });
    }, 5000); // 每5000毫秒（5秒）执行一次

    // 清理函数：组件卸载时清除定时器，防止内存泄漏
    return () => clearInterval(interval);
  }, []); // 空依赖数组表示此副作用只在组件挂载时运行一次
// ...

// ...
  const fetchMoreData = () => {
    // 这里的逻辑可以根据实际需求调整。
    // 在本例中，定时器负责实际的数据加载。
    // 这个函数主要用于处理当数据总量达到某个预设值时，停止无限滚动。
    if (first10.length >= arr.length) { // 或者你可以设置一个硬编码的阈值，例如30
      setHasMore(false);
      return;
    }
    // 如果需要，可以在这里触发一个外部API调用或更复杂的数据加载逻辑
  };
// ...

// ...
  return (
    <>
      <div className="mt-24"></div> {/* 仅为示例中的布局留白 */}

      <InfiniteScroll
        dataLength={first10.length} // 当前已加载的数据项数量
        next={fetchMoreData}       // 滚动到底部时调用的函数
        hasMore={hasMore}          // 是否还有更多数据可加载
        loader={<h3 className="font-bold text-2xl">Loading...</h3>} // 加载指示器
        endMessage={
          <p className="text-base my-4 font-medium text-center">
            <b>Yay! You have seen it all</b>
          </p>
        } // 所有数据加载完毕时显示的信息
      >
        {first10.map((t) => (
          <li key={t.id} className="mx-4 mt-8">
            {t.name.concat(` ${t.id}`)}
          </li>
        ))}
      </InfiniteScroll>
    </>
  );
}

import { arr } from "./utils"; // 假设utils.js中导出了一个名为arr的数组
import InfiniteScroll from "react-infinite-scroll-component";
import { useState, useEffect } from "react";

export default function App() {
  const [isLoading, setLoading] = useState(false); // 在此示例中未直接使用，但通常用于管理加载状态
  const [hasMore, setHasMore] = useState(true);
  const [first10, setFirst10] = useState(arr.slice(0, 10)); // 初始化显示前10条数据

  const fetchMoreData = () => {
    // 此函数在InfiniteScroll滚动到底部时被调用。
    // 在本例中，实际的数据分页和加载是由useEffect中的定时器控制的。
    // 因此，这里主要用于检查是否所有数据都已加载，并更新hasMore状态。
    if (first10.length >= arr.length) {
      setHasMore(false);
      return;
    }
    // 如果需要，可以在这里添加额外的逻辑，例如延迟加载或API调用
  };

  useEffect(() => {
    let insertAt = 10; // 跟踪下一次数据切片的起始索引

    const interval = setInterval(() => {
      // 如果已加载的数据量达到或超过原始数组的总长度，则停止定时器
      if (insertAt >= arr.length) {
        clearInterval(interval);
        setHasMore(false);
        return;
      }

      // 使用函数式更新来安全地追加新的数据切片
      setFirst10((prevFirst10) => {
        const nextSlice = arr.slice(insertAt, insertAt + 10); // 获取下一段10条数据
        insertAt += 10; // 更新下一次切片的起始索引
        return [...prevFirst10, ...nextSlice]; // 返回一个包含旧数据和新数据的新数组
      });
    }, 5000); // 每5秒执行一次

    // 清理函数：组件卸载时清除定时器
    return () => clearInterval(interval);
  }, []); // 空依赖数组确保此副作用只在组件挂载时运行一次

  return (
    <>
      <div className="mt-24"></div> {/* 布局辅助元素 */}

      <InfiniteScroll
        dataLength={first10.length} // 告诉InfiniteScroll当前渲染了多少数据
        next={fetchMoreData}       // 滚动到底部时触发的回调
        hasMore={hasMore}          // 是否还有更多数据可加载
        loader={<h3 className="font-bold text-2xl">Loading...</h3>} // 加载指示器
        endMessage={
          <p className="text-base my-4 font-medium text-center">
            <b>Yay! You have seen it all</b>
          </p>
        } // 所有数据加载完毕时显示的消息
      >
        {first10.map((t) => (
          <li key={t.id} className="mx-4 mt-8">
            {t.name.concat(` ${t.id}`)}
          </li>
        ))}
      </InfiniteScroll>
    </>
  );
}