React Native FlatList滚动加载更多失效 求助实现分页加载

问题分析 #

你的代码存在几个核心问题导致无法正常加载更多：

• 未传递分页参数给后端，后端无法返回下一页的10条数据，每次请求可能都返回重复的第一页数据
• 缺少防重复请求的控制，滚动时可能多次触发加载
• handleLoadMore 函数未定义，FlatList 的 onEndReached 无法正确触发加载逻辑
• 初始数据加载逻辑有问题（dataStorageNews == '' 数组与字符串的判断不严谨）
• 没有判断是否还有更多数据，会导致无效请求

修复后的完整代码示例 #

import { useState, useEffect } from 'react';
import { FlatList, TouchableOpacity, Text, View, StyleSheet } from 'react-native';

const YourComponent = () => {
  const [DataList, setDataList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true); // 标记是否还有更多数据
  const [currentPage, setCurrentPage] = useState(1); // 当前页码
  const itemsPerPage = 10; // 每页10条

  // 替换为你的实际全局数据
  const dataStorageNews = [];
  // 替换为你的实际筛选参数
  const selected = '';

  // 获取数据的核心函数，加入分页参数
  const getBarang = async (namex = '') => {
    if (loading || !hasMore) return; // 防止重复请求或无更多数据时请求
    setLoading(true);

    try {
      if (dataStorageNews.length === 0) {
        setLoading(false);
        return;
      }

      const response = await fetch('https://example/api_doc/proses_api.php', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          aksi: 'load_potensi_all_filter',
          uru_id_desa: dataStorageNews[0].uru_id_desa,
          nama_potensi: namex,
          filter: selected,
          page: currentPage, // 传递当前页码
          limit: itemsPerPage // 传递每页条数
        }),
      });

      const responseJson = await response.json();
      const newData = responseJson.result || [];

      // 更新数据列表
      setDataList(prevData => [...prevData, ...newData]);
      // 判断是否还有更多数据：如果返回的新数据少于每页条数，说明没有更多了
      setHasMore(newData.length === itemsPerPage);
      // 页码自增
      setCurrentPage(prev => prev + 1);
    } catch (error) {
      console.error('加载数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 页面初始化时加载第一页数据
  useEffect(() => {
    getBarang();
  }, []);

  // 加载更多的触发函数
  const handleLoadMore = () => {
    getBarang();
  };

  return (
    <FlatList
      data={DataList}
      keyExtractor={(item, index) => item.index_potensi || index.toString()} // 优先用唯一ID，避免index导致的渲染异常
      initialNumToRender={itemsPerPage}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.1}
      renderItem={({ item }) => (
        // 替换为你的列表项渲染逻辑
        <View style={styles.itemContainer}>
          <Text>{item.nama_potensi}</Text>
        </View>
      )}
      ListFooterComponent={() => {
        if (!hasMore) {
          return <Text style={styles.noMoreText}>没有更多数据了</Text>;
        }
        return (
          <TouchableOpacity 
            style={styles.loadMoreButton} 
            onPress={handleLoadMore}
            disabled={loading} // 加载时禁用按钮
          >
            <Text style={styles.loadMoreButtonText}>
              {loading ? 'Loading...' : 'Load More..'}
            </Text>
          </TouchableOpacity>
        );
      }}
    />
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  loadMoreButton: {
    padding: 16,
    alignItems: 'center',
  },
  loadMoreButtonText: {
    fontSize: 16,
    color: '#1677ff',
  },
  noMoreText: {
    padding: 16,
    textAlign: 'center',
    color: '#999',
  },
});

export default YourComponent;

关键修改说明 #

1. 添加分页参数：给API请求传递page和limit，让后端返回对应页码的10条数据（需要后端配合支持分页逻辑）
2. 防重复请求控制：在getBarang开头判断loading或!hasMore时直接返回，避免滚动时多次触发请求
3. 新增状态管理：
   • currentPage：记录当前请求的页码
   • hasMore：标记是否还有更多数据可加载
4. 修正初始数据判断：用dataStorageNews.length === 0替代dataStorageNews == ''，数组判断更严谨
5. 完善加载状态：ListFooterComponent中根据hasMore显示不同内容，加载时禁用按钮
6. 优化keyExtractor：优先使用数据的唯一ID（item.index_potensi），避免用index导致的列表渲染异常

后端配合说明 #

需要确保你的后端接口load_potensi_all_filter支持分页参数，根据page和limit计算偏移量，返回对应范围的数据，例如：

• 第1页：返回前10条（offset=0, limit=10）
• 第2页：返回11-20条（offset=10, limit=10）
• 当没有更多数据时，返回空数组或长度小于10的数组

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