如何用react-infinite-scroll-component实现本地JSON无限滚动

核心思路 #

既然已经成功导入本地JSON数据myData，完全不需要再用axios请求public文件夹的文件。我们只需要通过当前页码和每页条数来分批截取本地数据，配合react-infinite-scroll-component完成无限滚动逻辑。

修改后的完整代码 #

import { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import Typography from '@mui/material/Typography'; // 按你实际使用的UI库引入
import myData from 'path-where-this-data-reside-into-my-project-directory';

const PAGE_SIZE = 3; // 每页固定加载3条数据

export default function MyComponent() {
  const [currentPage, setCurrentPage] = useState(1);
  const [displayData, setDisplayData] = useState<any[]>([]);

  // 初始化加载第一页数据
  useEffect(() => {
    const initialData = myData.slice(0, PAGE_SIZE);
    setDisplayData(initialData);
  }, []);

  // 加载下一页数据的逻辑
  const fetchData = () => {
    const nextPage = currentPage + 1;
    const startIdx = (nextPage - 1) * PAGE_SIZE;
    const endIdx = nextPage * PAGE_SIZE;
    
    // 截取对应页码的片段数据
    const newPageData = myData.slice(startIdx, endIdx);
    if (newPageData.length > 0) {
      setDisplayData(prev => [...prev, ...newPageData]);
      setCurrentPage(nextPage);
    }
  };

  // 判断是否还有更多数据可加载
  const hasMore = displayData.length < myData.length;

  return (
    <InfiniteScroll
      hasMore={hasMore}
      loader={<div>加载中...</div>}
      dataLength={displayData.length}
      next={fetchData}
      endMessage={<p>全部加载完成！</p>}
    >
      {displayData.map((item) => (
        <Typography key={item.id}>{item.name}</Typography>
      ))}
    </InfiniteScroll>
  );
}

关键说明 #

• 移除了axios请求，直接使用已导入的myData，避免重复读取本地资源
• 通过currentPage跟踪当前页码，结合PAGE_SIZE用数组slice方法精准截取对应页的数据
• hasMore通过对比已展示数据长度和总数据长度，自动控制是否停止加载
• 初始化时先加载第一页数据，后续每次触发fetchData都会追加下一页数据到列表中

内容的提问来源于stack exchange，提问作者Himanshu Sharma