react-infinite-scroller的loadMore不触发及无限调用问题求助

咱们一步步来拆解和修复你遇到的两个核心问题：

问题1：loadMore无法触发的原因及修复 #

核心原因： #

1. useWindow={false}但未配置滚动容器样式：当关闭窗口滚动监听时，组件会监听自身内部容器的滚动，但如果容器没有固定高度和overflow-y: auto，就不会出现滚动条，组件自然检测不到滚动到底部的事件。
2. loadMore写法错误：你写的loadMore={() => this.fetchCompanies}只是传递了函数引用，既没有正确接收组件自动传递的页码参数，也没有实际调用函数。

修复步骤： #

• 给包含InfiniteScroll的容器添加滚动样式：
  在你的traineeship.style.scss里补充：

  .searchResults {
    // 根据页面布局调整高度，比如减去头部高度
    height: calc(100vh - 200px);
    overflow-y: auto;
    // 可选：美化滚动条
    scrollbar-width: thin;
  }
  

• 修正loadMore绑定方式：
  构造函数绑定fetchCompanies后，直接把函数传给loadMore即可（组件会自动传递当前要加载的页码）：

  <InfiniteScroll
    pageStart={0}
    loadMore={this.fetchCompanies}
    hasMore={this.state.hasMore}
    loader={<div className="loader" key={0}>Loading ...</div>}
    useWindow={false}
  >
  

问题2：绑定fetchCompanies后无限调用的原因及修复 #

核心原因： #

1. hasMore设置无效：你写的hasMore={true || false}永远会被解析为true，组件会一直认为有更多数据，不断触发loadMore。
2. 未动态控制加载状态：每次请求后没有根据返回数据判断是否还有更多内容，也没有正确利用组件传递的页码参数。

修复步骤： #

1. 更新state结构：移除冗余的page状态，新增hasMore状态控制加载逻辑：

   constructor(props) {
     super(props);
     this.state = {
       companies: [],
       hasMore: true, // 初始默认有更多数据
     };
     // 绑定函数到当前组件实例
     this.fetchCompanies = this.fetchCompanies.bind(this);
   }
   

2. 修正fetchCompanies函数：接收组件传递的页码，根据返回数据动态更新hasMore：

   fetchCompanies(page) {
     traineeship.getAll(page).then(response => {
       // 检查是否有有效数据
       if (response.data && response.data._embedded?.companies.length > 0) {
         this.setState(prevState => ({
           // 使用prevState避免异步更新的状态不一致问题
           companies: [...prevState.companies, ...response.data._embedded.companies],
           // 根据返回数据长度判断是否还有更多
           hasMore: response.data._embedded.companies.length > 0
         }));
       } else {
         // 没有数据了，停止加载
         this.setState({ hasMore: false });
         console.log("没有更多实习岗位了");
       }
     }).catch(error => {
       console.error("加载实习岗位失败:", error);
       // 请求出错时也停止加载
       this.setState({ hasMore: false });
     });
   }
   

3. 修正componentDidMount的初始化调用：

   componentDidMount() {
     // 加载第一页数据
     this.fetchCompanies(0);
   }
   

最终关键代码片段 #

构造函数与初始化： #

constructor(props) {
  super(props);
  this.state = {
    companies: [],
    hasMore: true,
  };
  this.fetchCompanies = this.fetchCompanies.bind(this);
}

componentDidMount() {
  this.fetchCompanies(0);
}

InfiniteScroll组件： #

<InfiniteScroll
  pageStart={0}
  loadMore={this.fetchCompanies}
  hasMore={this.state.hasMore}
  loader={<div className="loader" key={0}>Loading ...</div>}
  useWindow={false}
>
  {/* 你的公司列表渲染代码 */}
</InfiniteScroll>

这样修改后，就能完美解决两个问题：滚动到底部时会触发loadMore加载下一页，当没有更多数据时自动停止加载，也不会出现无需滚动就无限调用的情况。

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