React Native中FlatList与SectionList跨组件触发onEndReached问题咨询

触发原因 #

• 前序页面未卸载：主流移动端导航库（如React Navigation）默认采用栈结构保存页面，跳转时仅将新页面压入栈顶，不会销毁下层的FlatList所在页面，组件仍处于挂载状态可接收事件。
• 滚动事件透传：未做事件隔离的情况下，SectionList页面的滚动事件会向上冒泡，被仍挂载的FlatList捕获，满足阈值后触发其onEndReached回调。
• 缺少激活状态校验：两个列表的onEndReached回调均未判断自身所在页面是否处于用户可见的激活状态，只要满足滚动阈值就会执行逻辑。

修复方案 #

• 跳转时销毁前序页面
  如果不需要保留FlatList页面的填写/滚动状态，跳转时用路由替换方法（如React Navigation的navigation.replace()）替代入栈方法，直接让FlatList所在页面被卸载，从根源避免回调触发。
• 增加页面聚焦状态拦截
  使用导航库提供的页面聚焦能力，仅在当前页面对用户可见时才执行onEndReached的后续逻辑，示例代码如下（以React Navigation为例）：

// 页面组件内引入聚焦判断钩子
import { useIsFocused } from '@react-navigation/native';

const YourComponent = () => {
  const isFocused = useIsFocused();
  // 其他逻辑...

  return (
    <FlatList
      // 其他属性不变
      onEndReached={({ distanceFromEnd }) => {
        // 新增：页面未聚焦直接终止逻辑
        if (!isFocused) return;
        console.log("flatlist handleOnEndReached");
        if (distanceFromEnd < 0) return;
        if (posts.length > 0) addOption({lastRecord: posts[posts.length-1]._id});
      }}
    />
  )
}

SectionList组件也同步增加相同的聚焦判断即可。

• 开启嵌套滚动隔离（Android适配）
  如果是Android端出现该问题，可以给两个列表都加上nestedScrollEnabled={true}属性，开启嵌套滚动的事件隔离，避免滚动事件在多个列表间透传。
• 避免共用父滚动容器
  检查组件层级，不要将FlatList和SectionList嵌套在同一个父级ScrollView中，防止父容器滚动时同时触发两个子列表的加载回调。

额外排查建议 #

你可以先将两个列表onEndReached中的日志打印内容修改为不同标识（如FlatList的log加[FlatList]前缀，SectionList加[SectionList]前缀），先确认确实是两个回调都被触发，避免日志重复输出导致的误判。

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