React Native ListView自动触发endReached问题求助

嘿，我之前也踩过ListView的这个坑，咱们一步步拆解问题，把它搞定！

一、先搞懂为啥endReached会提前触发 #

这种情况一般逃不开两个原因：

• onEndReachedThreshold设置过大：这个属性是触发加载的阈值，单位是屏幕高度的比例。比如默认0.2的话，只要列表底部距离屏幕底部还有20%的高度就会触发。如果你的初始列表数据太少，连屏幕都填不满，那刚进来就会触发这个事件。
• ListView高度计算异常：如果ListView的父容器没设置合适的高度（比如没加flex:1），ListView可能会错误判断自己的滚动范围，导致提前触发加载。

对应的修复方案 #

1. 调小onEndReachedThreshold：把值设得小一点，比如0.1，只有当列表滚动到距离底部10%屏幕高度时才触发加载。
2. 给ListView加加载状态锁：在state里加个isLoading标志，正在加载的时候直接跳过onEndReached的触发，避免重复请求。
3. 确保ListView占满可用空间：给ListView或者父容器设置flex:1，让它正确计算自身高度。

二、解决page=1重复请求的问题 #

这个问题大概率是初始化时多次调用了加载方法，或者状态管理混乱导致的：

• 初始化只调用一次加载：检查componentDidMount里是不是重复调用了fetch方法，或者有没有其他地方（比如state更新回调）再次触发了page=1的请求。
• 正确重置数据和页码：当需要重新加载列表时（比如下拉刷新），要先把页码重置为1，清空之前的数据，再发起请求，避免新旧数据叠加或者重复请求。

给你修改后的代码示例 #

结合上面的方案，调整你的代码：

import React, {Component} from 'react';
import {Alert, ListView, Text, View} from 'react-native';
import categoryApi from './category.api';

class CategoryListView extends Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.id !== r2.id}); // 建议用唯一id判断行变化
    this.state = {
      dataSource: dataSource.cloneWithRows([]),
      page: 1,
      isLoading: false, // 加载状态锁
      allListData: [], // 存储所有列表数据
    };
  }

  componentDidMount() {
    // 初始化只调用一次加载page=1的数据
    this.loadListData();
  }

  loadListData = async () => {
    // 如果正在加载，直接返回，避免重复请求
    if (this.state.isLoading) return;
    
    this.setState({isLoading: true});
    try {
      const apiResponse = await categoryApi.getList(this.state.page);
      // 处理数据：page=1时直接用新数据，后续页码追加数据
      const updatedData = this.state.page === 1 
        ? apiResponse.data 
        : [...this.state.allListData, ...apiResponse.data];
      
      this.setState({
        allListData: updatedData,
        dataSource: this.state.dataSource.cloneWithRows(updatedData),
        page: this.state.page + 1,
        isLoading: false,
      });
    } catch (error) {
      Alert.alert('加载失败', error.message || '网络异常，请重试');
      this.setState({isLoading: false});
    }
  };

  handleEndReached = () => {
    // 触发上拉加载
    this.loadListData();
  };

  renderListItem = (item) => {
    return (
      <View style={{padding: 16, borderBottomWidth: 1, borderBottomColor: '#f0f0f0'}}>
        <Text>{item.title}</Text>
      </View>
    );
  };

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderListItem}
        onEndReached={this.handleEndReached}
        onEndReachedThreshold={0.1} // 调小阈值
        enableEmptySections={true}
        style={{flex: 1}} // 确保ListView占满可用高度
      />
    );
  }
}

export default CategoryListView;

额外提醒 #

• 建议你换成FlatList代替ListView，因为ListView已经被官方废弃了，FlatList有更好的性能，还自带下拉刷新、上拉加载的完善支持。
• 如果page=1的API返回重复数据，记得检查下API本身的参数是否正确，比如有没有缓存或者分页参数传递错误的情况。

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