React Native FlatList的onReachEnd触发分页加载时数据不全如何解决？

核心问题原因 #

数据缺失问题由多个常见问题共同导致，并非仅Tabbar布局单一原因：

• 状态更新时直接修改原数组，React未检测到数组引用变化，触发渲染遗漏
• 未加请求锁，滚动时多次重复触发onEndReached，导致页码和数据拼接逻辑混乱
• 部分重复key条目被FlatList跳过渲染
• FlatList高度计算异常，触发时机错误导致最后一页未加载完成

修复步骤 #

1. 修复分页请求逻辑，增加请求锁与不可变状态更新 #

修改getMoreUsers函数，使用函数式状态更新避免闭包问题，新增加载状态防止重复请求：

// 先新增加载状态变量
const [isLoading, setIsLoading] = useState(false);

const getMoreUsers = () => {
  // 正在请求时直接拦截，避免重复触发
  if (isLoading) return;
  setIsLoading(true);
  fetch(pageNumber, {
    method: "GET",
    headers: {'Accept': 'application/json', "Content-Type": "application/json", "Authorization": "Token dcc997a9baf31d3f6e401e8e87eaa4bdb18c795a"},
  })
  .then(response => response.json())
  .then((data) => {
    if (data.next != null){
      setPageNumber(data.next);
      // 使用函数式更新，基于上一次的状态拼接新数据，保证数组引用变化触发渲染
      setUsersHook(prevUserList => [...prevUserList, ...data.results]);
    }
  })
  .catch((error) => console.log(error))
  .finally(() => {
    // 请求结束无论成败都重置加载状态
    setIsLoading(false);
  });
}

2. 修复FlatList配置与布局适配 #

• 移除legacyImplementation={true}，该属性为旧版本兼容实现，存在已知的渲染bug
• 父容器设置flex: 1，保证FlatList占满除Tabbar外的所有可用高度
• 适配安全区域修正可视区域计算，避免Tabbar遮挡导致onEndReached触发异常
• 校验keyExtractor返回值唯一性，避免重复key导致条目跳过渲染

修改后的FlatList示例：

// 若使用react-navigation可引入useSafeAreaInsets获取Tabbar高度
import { useSafeAreaInsets } from '@react-navigation/native';
const insets = useSafeAreaInsets();

<FlatList
  data={user}
  onEndReachedThreshold={0.3}
  onEndReached={getMoreUsers}
  numColumns={2}
  // 自动适配安全区域，调整滚动可视范围
  contentInsetAdjustmentBehavior="automatic"
  refreshControl={
    <RefreshControl
      refreshing={refreshing}
      onRefresh={onRefresh}
    />
  }
  // 确保key唯一，可临时加index校验是否是key重复导致的缺失
  keyExtractor={(item, index) => `${item.userid}_${index}`}
  // 底部padding适配安全区域
  contentContainerStyle={{paddingBottom: insets.bottom + 20}}
  columnWrapperStyle={{justifyContent:"space-between", paddingHorizontal: 20,}}
  renderItem={({ item }) => (
    <View style={{marginBottom: 20,}}>
      <Text>{item.name}</Text>
    </View>
  )} 
/>

3. 额外校验项 #

如果修复后仍有数据缺失，可打印user数组的总长度和渲染条目数量对比：

• 如果数组长度是90但渲染条目少，为key重复或者样式层级遮挡问题
• 如果数组长度本身不足90，为请求逻辑或分页参数错误问题

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