React 函数组件中实现分批加载和无限滚动：解决数组状态更新挑战

import { arr } from "./utils"; // 假设 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 = () => {
    // 这里的逻辑可以根据实际需求调整。
    // 在本例中，主要加载逻辑由 useEffect 中的 setInterval 控制。
    // 如果 arr 的长度达到某个阈值（例如30），则可以停止加载。
    if (first10.length >= arr.length) { // 更准确的判断条件
      setHasMore(false);
      return;
    }
    // 实际的“加载更多”逻辑在本例中由 setInterval 驱动
  };

  useEffect(() => {
    // 初始调用 fetchMoreData 检查是否有更多数据
    fetchMoreData();

    let insertAt = 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);
  }, []); // 空依赖数组表示只在组件挂载时运行一次，卸载时清理

  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"; // 假设 arr 是您的完整数据集，例如：[{id: 1, name: 'Item'}, ...]
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));

  const fetchMoreData = () => {
    // 这里的逻辑可以根据实际需求调整。
    // 在本例中，主要加载逻辑由 useEffect 中的 setInterval 控制。
    // InfiniteScroll 会在滚动时调用此函数，但实际数据添加由定时器完成。
    if (first10.length >= arr.length) {
      setHasMore(false);
      return;
    }
    // 可以选择在此处设置 setLoading(true) 来显示加载动画
  };

  useEffect(() => {
    // 初始检查是否有更多数据
    fetchMoreData();

    let insertAt = 10; // 追踪下一次切片的起始索引

    const interval = setInterval(() => {
      // 当所有数据都已加载时，清除定时器并设置 hasMore 为 false
      if (insertAt >= arr.length) {
        clearInterval(interval);
        setHasMore(false);
        return;
      }

      // 使用函数式更新来安全地添加新的数据切片
      setFirst10((prevFirst10) => {
        const nextSlice = arr.slice(insertAt, insertAt + 10);
        insertAt += 10; // 更新下一次切片的起始位置
        return [...prevFirst10, ...nextSlice];
      });
    }, 5000); // 每5秒加载10条数据

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

  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>
    </>
  );
}