React Native中如何在现有状态中添加新数据实现分页？

首先，你的核心问题是每次请求新数据时，直接用新的数据源覆盖了旧的状态值，导致之前加载的数据丢失。要实现数据追加，你需要把新获取的条目和现有状态中的数据合并后再更新状态，下面给你具体的修复方案，还会推荐更适合的替代组件。

一、修复现有 ListView 实现 #

1. 优化状态结构（更清晰易维护） #

建议把原始数据数组和 ListView 数据源分开存储，这样后续追加数据的操作会更直观：

constructor(props) { 
  super(props); 
  this.state = { 
    nexturl: "", 
    posts: [], // 存储所有已获取的帖子数据
    dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
  }; 
  this.fetchData = this.fetchData.bind(this); 
  this._onEndReached = this._onEndReached.bind(this);
} 

2. 调整初始数据获取逻辑 #

fetchData() { 
  return fetch('https://shopconapp.herokuapp.com/api/pagination/') 
    .then((response) => response.json()) 
    .then((responseData) => { 
      if (!responseData) { 
        this.props.navigation.navigate("Login"); // 确保能通过props拿到导航方法
      } else { 
        const newPosts = responseData.results.post;
        this.setState({ 
          nexturl: responseData.next, 
          posts: newPosts,
          dataSource: this.state.dataSource.cloneWithRows(newPosts)
        }); 
      } 
    })
    .catch(error => console.error('初始数据加载失败:', error));
} 

3. 修改下拉加载逻辑（核心：合并新旧数据） #

这一步是解决问题的关键，要把新请求到的数据和之前的数组合并，再生成新的数据源：

_onEndReached(){ 
  if (!this.state.nexturl) return; // 没有下一页时直接返回，避免无效请求
  return fetch(this.state.nexturl) 
    .then((response) => response.json()) 
    .then((responseData) => { 
      if (!responseData) { 
        this.props.navigation.navigate("Login"); 
      } else { 
        // 合并新旧数据，用扩展运算符生成新数组（React状态更新需要不可变操作）
        const mergedPosts = [...this.state.posts, ...responseData.results.post];
        this.setState({ 
          nexturl: responseData.next, 
          posts: mergedPosts,
          dataSource: this.state.dataSource.cloneWithRows(mergedPosts)
        }); 
      } 
    })
    .catch(error => console.error('下一页加载失败:', error));
} 

4. 更新 ListView 组件引用 #

<ListView 
  dataSource={this.state.dataSource} 
  onEndReachedThreshold={2} 
  onEndReached={this._onEndReached}
  renderRow={(post) => <Text>{post.title}</Text>} // 替换成你的行渲染组件
/>

二、推荐使用 FlatList（替代 ListView） #

ListView 在 React Native 中已经被官方弃用，FlatList是更推荐的列表组件，它内置了分页、下拉刷新的支持，代码更简洁，性能也更好。示例代码如下：

1. 调整状态 #

constructor(props) { 
  super(props); 
  this.state = { 
    nexturl: "", 
    posts: [],
    isLoading: false // 控制加载状态，防止重复请求
  }; 
  this.fetchData = this.fetchData.bind(this); 
  this.loadMore = this.loadMore.bind(this);
} 

2. 数据获取与加载更多 #

fetchData() { 
  this.setState({ isLoading: true });
  return fetch('https://shopconapp.herokuapp.com/api/pagination/') 
    .then((response) => response.json()) 
    .then((responseData) => { 
      if (!responseData) { 
        this.props.navigation.navigate("Login"); 
      } else { 
        this.setState({ 
          nexturl: responseData.next, 
          posts: responseData.results.post,
          isLoading: false
        }); 
      } 
    })
    .catch(error => {
      console.error('初始数据加载失败:', error);
      this.setState({ isLoading: false });
    });
} 

loadMore(){ 
  if (this.state.isLoading || !this.state.nexturl) return;
  this.setState({ isLoading: true });
  return fetch(this.state.nexturl) 
    .then((response) => response.json()) 
    .then((responseData) => { 
      if (!responseData) { 
        this.props.navigation.navigate("Login"); 
      } else { 
        this.setState({ 
          nexturl: responseData.next, 
          posts: [...this.state.posts, ...responseData.results.post],
          isLoading: false
        }); 
      } 
    })
    .catch(error => {
      console.error('下一页加载失败:', error);
      this.setState({ isLoading: false });
    });
} 

3. 渲染 FlatList #

import { FlatList, ActivityIndicator } from 'react-native';

<FlatList
  data={this.state.posts}
  keyExtractor={(item) => item.id.toString()} // 替换成你的数据唯一标识字段
  onEndReached={this.loadMore}
  onEndReachedThreshold={0.2}
  renderItem={({ item }) => <Text>{item.title}</Text>} // 你的行渲染组件
  // 底部加载提示
  ListFooterComponent={() => this.state.isLoading && <ActivityIndicator size="small" />}
/>

关键注意事项 #

• 一定要添加加载状态控制，避免用户快速滚动时多次触发加载请求；
• 合并数组时使用扩展运算符 [...oldArray, ...newArray] 或者 oldArray.concat(newArray)，确保生成新数组（React 状态更新要求不可变操作）；
• 确认 navigate 方法能正确调用，比如通过组件的 props.navigation 获取（如果组件不在导航栈中，需要手动传递导航属性）。

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