React中实现向下滚动每次加载10条数据并触发fetchMoreData方法

你现有代码无法正常触发加载、无法实现分页效果的核心原因是组件核心属性写死、加载逻辑缺失，按以下方式修改即可：

核心问题点 #

• dataLength 硬编码为固定值25，组件无法感知当前列表真实长度，无法正确判定滚动触达时机
• fetchMoreData 无分页请求、数据追加、重复请求拦截逻辑，无法实现每次加载10条的效果
• hasMore 硬编码为true，数据加载完成后不会停止触发无效请求

可直接运行的实现代码 #

固定单页加载条数为10，通过状态管理列表数据、页码、加载状态、是否还有更多数据：

import { useState, useCallback, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import { Grid } from '@mui/material';

// 每次滚动加载10条数据
const PAGE_SIZE = 10;

export default function SimulationListPage() {
  // 存储已加载的全量列表数据
  const [simulationList, setSimulationList] = useState([]);
  // 当前请求页码
  const [pageNum, setPageNum] = useState(1);
  // 是否还有未加载的剩余数据
  const [hasMore, setHasMore] = useState(true);
  // 加载锁，防止滚动过程中重复触发请求
  const [loading, setLoading] = useState(false);

  // 滚动触底触发的加载方法
  const fetchMoreData = useCallback(async () => {
    if (loading) return;
    setLoading(true);

    try {
      // 替换为你项目实际的列表接口，传入当前页码和单页条数参数
      const response = await fetch(`/your-list-api?page=${pageNum}&pageSize=${PAGE_SIZE}`);
      const { list: newData, total } = await response.json();

      // 新加载的数据追加到现有列表末尾
      setSimulationList(prev => [...prev, ...newData]);
      // 页码自增，供下一次加载使用
      setPageNum(prev => prev + 1);
      // 判断是否已加载完全部数据
      setHasMore(simulationList.length + newData.length < total);
    } catch (error) {
      console.error('列表加载失败:', error);
    } finally {
      setLoading(false);
    }
  }, [loading, pageNum, simulationList.length]);

  // 组件挂载时加载第一页数据
  useEffect(() => {
    fetchMoreData();
  }, []);

  return (
    <InfiniteScroll
      // 必须传入当前列表的真实长度，禁止写死固定值
      dataLength={simulationList.length}
      next={fetchMoreData}
      hasMore={hasMore}
      loader={<h4>Loading...</h4>}
      endMessage={<p style={{textAlign: 'center', margin: '1rem 0'}}>没有更多数据了</p>}
    >
      <Grid container spacing={4} sx={{ marginTop: '1rem' }}>
        {simulationList.map((item) => (
          <Grid
            item
            xs={3}
            key={item?._id}
          >
            {/* 此处填写列表项的实际渲染内容 */}
          </Grid>
        ))}
      </Grid>
    </InfiniteScroll>
  );
}

注意事项 #

• 如果你的滚动区域是内部固定高度容器而非整个浏览器窗口，给滚动容器设置唯一id，再给InfiniteScroll组件传入scrollableTarget="你的容器id"属性即可
• 接口请求逻辑替换为项目中实际使用的请求方法即可，只要保证「每次取10条、数据追加到列表、更新hasMore状态」三个核心逻辑正确，滚动触发就不会异常
• 不要硬编码dataLength和hasMore属性，这两个值是组件判断触底加载时机的核心依赖

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