React函数组件中基于时间间隔的分批次无限滚动实现与状态管理

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

export default function App() {
  const [isLoading, setLoading] = useState(false); // 示例，本教程中可能不直接使用
  const [hasMore, setHasMore] = useState(true);
  const [first10, setFirst10] = useState(arr.slice(0, 10)); // 初始化显示前10条数据
  // ...
}

// ...
  useEffect(() => {
    let insertAt = 10; // 从第10个元素开始切片

    const interval = setInterval(() => {
      // 检查是否所有数据都已加载完毕
      if (insertAt >= arr.length) {
        clearInterval(interval); // 停止定时器
        setHasMore(false); // 没有更多数据
        return;
      }

      // 使用函数式更新确保基于最新的first10状态
      setFirst10((prevFirst10) => {
        const nextSlice = arr.slice(insertAt, insertAt + 10); // 切取下一批10条数据
        insertAt += 10; // 更新切片索引
        return [...prevFirst10, ...nextSlice]; // 将新数据追加到现有数据中
      });
    }, 5000); // 每5秒加载一次

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

// ...
  const fetchMoreData = () => {
    // 这个函数在我们的场景中可以保持为空或用于触发一次性加载
    // 因为数据加载主要由setInterval驱动
    // 如果需要，可以在这里放置一些额外的逻辑，例如在滚动到底部时立即触发一次加载
    // 但在当前基于定时器的实现中，它可能更多是作为InfiniteScroll的API要求
    // 我们可以根据需要调整其行为。
    // 例如，如果arr的长度达到某个阈值，可以设置hasMore(false)
    if (first10.length >= arr.length) { // 当显示的数据量达到总数据量时
      setHasMore(false);
      return;
    }
    // 如果你希望在滚动到底部时也立即加载下一批，而不是等待5秒，可以在这里调用setFirst10的逻辑
    // 但这会与定时器逻辑产生冲突，通常选择一种主导方式。
  };

  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中导出了一个包含大量数据的数组
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条数据

  // fetchMoreData在当前基于setInterval的实现中，可以作为InfiniteScroll的next属性的占位符
  // 也可以根据需要添加逻辑，例如在滚动到底部时立即触发一次加载
  const fetchMoreData = () => {
    // 当所有数据都已通过定时器加载完毕时，确保hasMore为false
    if (first10.length >= arr.length) {
      setHasMore(false);
      return;
    }
    // 如果希望在滚动时也触发加载，而不是只依赖定时器，可以在这里调用加载逻辑
    // 但需注意避免与定时器重复加载
  };

  useEffect(() => {
    let insertAt = 10; // 从原始数据数组的第10个索引开始切片

    const interval = setInterval(() => {
      // 如果所有数据都已切片完毕，则停止定时器并设置hasMore为false
      if (insertAt >= arr.length) {
        clearInterval(interval);
        setHasMore(false);
        return;
      }

      // 使用函数式更新确保基于最新的first10状态进行追加
      setFirst10((prevFirst10) => {
        const nextSlice = arr.slice(insertAt, insertAt + 10); // 切取下一批10条数据
        insertAt += 10; // 更新切片索引，准备下一次切片
        return [...prevFirst10, ...nextSlice]; // 将新数据追加到现有数据中
      });
    }, 5000); // 每5秒加载一次新的10条数据

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

  return (
    <>
      <div className="mt-24"></div> {/* 页面顶部留白 */}

      <InfiniteScroll
        dataLength={first10.length} // 当前已渲染的数据项数量
        next={fetchMoreData}       // 滚动到底部时调用的函数
        hasMore={hasMore}          // 是否还有更多数据可供加载
        loader={<h3 className="font-bold text-2xl text-center my-4">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 list-none border-b pb-2">
            {t.name.concat(` ${t.id}`)} {/* 渲染列表项 */}
          </li>
        ))}
      </InfiniteScroll>
    </>
  );
}