ReactJS无限滚动加载问题：点击加载更多按钮时旧数据被覆盖如何解决？

嘿，我一眼就瞅到问题所在啦！你每次点击「加载更多」的时候，直接把state里的status替换成了新请求返回的数据，旧的帖子自然就被冲没了。咱们只需要调整一下state更新的逻辑，把新帖子追加到已有列表后面就行，下面是具体的修复步骤和代码：

核心问题分析 #

你当前的代码里，每次请求完成后是这么更新state的：

this.setState({status: result, pageNumber: this.state.pageNumber+1})

这里的status被直接替换成了新页面的API返回值，之前的帖子数据就丢失了。而我们需要做的是把新返回的result.results（也就是新帖子）加到原来的帖子列表末尾。

修复方案与代码修改 #

1. 调整State结构 #

把state拆分成更清晰的字段，单独存储帖子列表、当前页码和是否还有更多数据：

this.state = {
  posts: [], // 用来存所有已加载的帖子
  pageNumber: 1,
  hasMore: true, // 标记是否还有更多帖子可加载
  loading: false // 防止重复点击请求
};

2. 封装单独的请求函数 #

不要直接复用componentDidMount，写一个专门的fetchPosts函数，这样componentDidMount和加载更多按钮都能调用它：

fetchPosts = () => {
  // 如果正在加载或者没有更多数据，直接返回
  if (this.state.loading || !this.state.hasMore) return;

  this.setState({ loading: true });
  const store = JSON.parse(localStorage.getItem('login'));
  const url = `http://127.0.0.1:8000/myapi/allpost/?format=json&page=${this.state.pageNumber}`;

  fetch(url, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Token ${store.token}`
    }
  })
  .then(res => res.json())
  .then(result => {
    // 关键：把新帖子追加到已有列表后面
    this.setState(prevState => ({
      posts: [...prevState.posts, ...result.results],
      pageNumber: prevState.pageNumber + 1,
      hasMore: !!result.next, // 根据API返回的next判断是否还有更多
      loading: false
    }));
  })
  .catch(err => {
    console.error('加载帖子失败:', err);
    this.setState({ loading: false });
  });
}

3. 修改生命周期和加载更多方法 #

componentDidMount() {
  this.fetchPosts();
}

morePosts = () => {
  this.fetchPosts();
}

4. 更新渲染逻辑 #

现在直接从this.state.posts取所有帖子来渲染，同时处理加载状态：

render() {
  const { posts, loading, hasMore } = this.state;

  if (posts.length === 0 && !loading) {
    return (
      <div>
        <br/>
        <p style={{textAlign:'center'}}>loading...</p>
      </div>
    );
  }

  const postList = posts.map((post, index) => (
    <Status key={post.id} body={post.body} id={post.id} />
  ));

  return (
    <div>
      <br/>
      <div>{postList}</div>
      {hasMore && (
        <button 
          onClick={this.morePosts} 
          disabled={loading}
          style={{marginTop: '1rem', cursor: loading ? 'not-allowed' : 'pointer'}}
        >
          {loading ? '加载中...' : 'See more posts'}
        </button>
      )}
      {!hasMore && <p style={{textAlign:'center', marginTop: '1rem'}}>没有更多帖子啦</p>}
    </div>
  );
}

关键改动说明 #

• 使用prevState来获取之前的帖子列表，避免state更新的异步问题
• 用扩展运算符[...prevState.posts, ...result.results]把新帖子追加到旧列表后面
• 增加loading状态防止重复点击请求，提升用户体验
• 根据API返回的next字段判断是否还有更多数据，避免无效请求

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