React Native FlatList无限滚动轮播仅单次更新问题排查

核心错误点 #

• 闭包陈旧值问题（最主要原因）
  你将onViewableItemsChanged存在useRef中，且直接将ref.current传给FlatList，这个回调函数只会在组件首次渲染时创建一次，内部捕获的listData永远是初始状态值。第一次触发追加后，后续滚动触发回调时，拿到的还是初始的listData，执行追加操作时相当于始终基于原始长度的数组做拼接，甚至会把之前已经追加过的数据覆盖掉，自然无法持续追加。
• 数组追加语法错误
  追加数据时写的[...listData.data, props.data]存在逻辑错误：props.data本身是数组，这种写法会把整个原始数组作为单个元素插入到新数组末尾，而非把原始数组的每一项依次追加。第一次追加完数据结构就变成[...原始轮播项, 原始数组引用]，数据长度仅增加1，完全不符合轮播项追加的预期。
• 依赖漏导入问题
  代码中直接使用Platform.OS做平台判断，但顶部导入语句中没有引入Platform，运行时会直接抛出引用错误。
• 触发时机与设计不符
  现有逻辑是滚动到当前列表最后一项时才触发追加，和你预期的“滚动到倒数第二个索引就预加载”的设计不一致，容易出现滚动到末尾加载卡顿的问题。
• 重复触发风险
  追加逻辑没有做重复触发拦截，滚动过程中回调多次触发时会重复执行拼接操作，导致数据冗余重复。

修正方案 #

1. 补全顶部导入的Platform依赖
2. 解决闭包陈旧值问题：通过ref同步最新的listData值，同时setListData统一使用函数式更新，不依赖外部闭包的状态值
3. 修正数组追加语法，追加时展开原始数组的每一项
4. 调整追加触发阈值，当滚动到倒数第二个索引时就执行追加
5. （可选）将组件内每次渲染都重新创建的默认配置state对象移到组件外部，避免无意义的性能消耗

核心修正代码 #

补全导入：

import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Dimensions,
  UIManager,
  LayoutAnimation,
  Platform, // 补全漏导入的依赖
} from 'react-native';

修正onViewableItemsChanged逻辑：

// 用ref同步最新的listData，解决回调闭包拿旧值的问题
const listDataRef = useRef(listData);
useEffect(() => {
  listDataRef.current = listData;
}, [listData]);

const onViewableItemsChanged = useRef(({viewableItems}) => {
  if (viewableItems.length > 0) {
    const currentIndex = viewableItems[0].index;
    const currentData = listDataRef.current.data;

    // 滚动到倒数第二个索引时触发追加，符合预加载设计
    if (currentIndex >= currentData.length - 2 && props.loop) {
      setListData(prev => ({
        index: currentIndex,
        // 展开原始数组的每一项，避免插入整个数组
        data: [...prev.data, ...props.data],
      }));
    } else {
      // 函数式更新，不依赖外部闭包的listData
      setListData(prev => ({...prev, index: currentIndex}));
    }
  }
}).current;

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