React组件使用react-infinite-scroll-component初始渲染时重复加载帖子问题求助

嘿，我来帮你排查这个重复加载的问题！先看你描述的情况：页面加载时帖子重复显示，就算关了React.StrictMode也没用，这确实挺头疼的。结合你贴的组件代码，我梳理几个可能的原因和解决办法：

先拆解你的核心逻辑问题 #

你当前用useEffect在组件挂载时（依赖groupId和page）拉取第一页数据，同时react-infinite-scroll-component默认会在初始渲染时，如果当前内容没填满容器，自动调用next方法触发加载更多。这就很可能导致两次请求同一页数据，最终帖子重复显示。

具体排查方向和解决方案 #

• 最常见的触发原因：组件自动初始加载+useEffect加载重复
  react-infinite-scroll-component默认会在初始时自动执行一次next方法，而你的useEffect已经在组件挂载时拉取了第一页数据。如果这两次请求的都是page=1，那数据自然会重复。

  解决办法：给InfiniteScroll组件加上initialLoad={false}属性，关闭它的自动初始加载，只靠useEffect加载第一页，滚动到底部再触发后续加载：

  <InfiniteScroll
    dataLength={posts.length}
    next={fetchMorePosts}
    hasMore={hasMore}
    loader={<h4>Loading...</h4>}
    endMessage={<p>No more posts</p>}
    initialLoad={false} // 新增这个属性关闭自动初始加载
  >
  

• 检查请求的page参数是否重复
  在fetchPosts函数里加个console.log(page)，看看每次请求的页码是多少。如果两次都是1，那说明useEffect被触发了两次，或者fetchMorePosts触发时page没正确递增。这时候可以检查groupId是否在组件挂载后有变化（比如useParams的groupId初始为undefined，后来才拿到正确值），导致useEffect重复执行。

• 排查后端分页逻辑
  直接在浏览器地址栏调用你的接口，比如/api/posts/group/xxx?page=1和/api/posts/group/xxx?page=2，看看返回的数据是不是重复的。如果后端分页逻辑有问题（比如忽略page参数，始终返回第一页），那前端再怎么调整也没用，得先修复后端接口。

• 兜底方案：避免重复数据存入状态
  就算不小心请求了重复数据，也可以在更新状态时过滤掉已有的帖子，根据post._id去重：

  setPosts(prev => [...prev, ...data.filter(post => !prev.some(p => p._id === post._id))]);
  

你可以先试试加initialLoad={false}，这个应该能解决大部分初始重复加载的问题。如果还是不行，再按上面的步骤一步步排查~

备注：内容来源于stack exchange，提问作者WPdev11