react-infinite-scroll-component的loadMore仅调用一次，hasMore为true时失效如何解决？

核心错误点 #

你当前配置的核心问题是dataLength属性被写死为固定值100：react-infinite-scroll-component依赖dataLength判断当前已加载的总数据量，只有识别到数据量发生变化后，才会在后续滚动到容器底部时触发下一次loadMore调用，写死固定值会导致库判定没有新数据加载，自然不会重复触发next方法。

其他可能的问题排查点 #

• 检查scrollableTarget绑定的scrollableDiv元素是否符合滚动容器要求：必须设置固定高度/最大高度，同时开启overflow-y: auto或overflow-y: scroll，否则滚动事件无法被库捕获，不会触发加载逻辑。
• 检查loadMoreConversation函数是否存在闭包问题或者未处理的异步逻辑，导致状态更新异常，无法触发后续加载。

修复步骤 #

1. 替换固定的dataLength为动态数据长度
   将dataLength的值改为你渲染数据源chatItems的长度，确保每次加载新数据后该值自动更新：

<InfiniteScroll
      dataLength={chatItems.length} // 改为动态数组长度
      pullDownToRefreshThreshold={50}
      next={loadMoreConversation}
      scrollableTarget="scrollableDiv"
      hasMore={true} // 实际项目建议根据接口返回的是否有下一页动态设置，避免无效请求
      loader={<h4>Loading...</h4>}
    >
      <ChatItemList
        chatItems={chatItems}
        isInDeleteMode={deleteActive}
        onBottomDrawerHandler={onBottomDrawerHandler}
      />
</InfiniteScroll>

2. 确认滚动容器样式配置正确
   给绑定的滚动容器添加必要的样式：

#scrollableDiv {
  height: 800px; /* 可根据需求调整为实际需要的高度，也可以用vh等相对单位 */
  overflow-y: auto;
}

3. 给加载函数加状态锁避免重复调用
   如果你的加载逻辑是异步请求，建议添加加载状态锁，防止单次滚动触发多次请求：

const [isLoading, setIsLoading] = useState(false);

const loadMoreConversation = async () => {
  // 加载中直接返回，避免重复触发
  if (isLoading) return;
  setIsLoading(true);
  try {
    // 你的下一页数据请求逻辑
    const nextPageData = await fetchNextChatList();
    // 合并新数据到原有列表
    setChatItems(prevList => [...prevList, ...nextPageData]);
  } catch (e) {
    console.error('会话列表加载失败', e);
  } finally {
    setIsLoading(false);
  }
}

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