loadMore function never called

Hi, I cannot seem to get this to work at all, as the loadMore function never fires when reaching the end of the list of initial items.

My code as follows:

@inject('uiStore', 'journalStore', 'authStore', 'paperStore')
@observer
class SingleJournalPage extends Component {

  constructor(props){
    super(props);
    this.journalId = this.props.match.params.id;
    this.props.paperStore.setFilter((e) => parseInt(e.journalId, 10) === parseInt(this.journalId, 10));
    this.state = {
      hasMoreItems: true,
      articles: []
    }
    
    this.loadInitial();
  }

  loadInitial () {
    if (!this.props.paperStore.isLoading) {
      let journalId = this.journalId;
      this.props.paperStore.getPapersForJournal(journalId, 0, this._updateState, this);
    }
  }

  _updateState(component, filteredView, currentPage, totalPages){
    component.setState({
      articles: filteredView,
      hasMoreItems: currentPage < totalPages
    });
  }

  loadMore (page) {
    console.log("load more!");
    if(this.state.hasMoreItems){
      if (!this.props.paperStore.isLoading) {
        let journalId = this.journalId;
        this.props.paperStore.getPapersForJournal(journalId, page, this._updateState, this);
      }
    }
  }

  render () {

    var items = [];
    this.state.articles.map((element, index) => {
      items.push(
        <div key={index}>
          <PaperComponent key={index} data={element}/>
          <hr/>
        </div>
      )
    })

    const journal = this.props.journalStore.data.get(this.journalId);
    return (
      <div className="SingleJournalPage">
        <BackButton/>
        <h2>{journal && journal.name}</h2>
        <ReactPlaceholder type='media' rows={10}
          style={{marginTop: '5em'}}
          ready={!this.props.paperStore.isLoading}
          showLoadingAnimation={true}>
          <div></div>
        </ReactPlaceholder>

        <InfiniteScroll
              pageStart={0}
              loadMore={this.loadMore.bind(this)}
              hasMore={this.state.hasMoreItems && !this.props.paperStore.isLoading}
              loader={<div className="loader" key={0}>Loading ...</div>}>
              <div className="SingleJournalWrapper">
                {items}
                <ReactPlaceholder type='media' rows={10}
                  style={{marginTop: '5em'}}
                  ready={!this.props.paperStore.isLoading}
                  showLoadingAnimation={true}>
                  <div></div>
                </ReactPlaceholder>
                <ReactPlaceholder type='media' rows={10}
                  ready={!this.props.paperStore.isLoading}
                  showLoadingAnimation={true}>
                  <div></div>
                </ReactPlaceholder>
                <ReactPlaceholder type='media' rows={10} 
                  ready={!this.props.paperStore.isLoading}>
                  <div></div>
                </ReactPlaceholder>
              </div>
        </InfiniteScroll>
      </div>
    );
  };
}

The loadMore function just never seems to fire at all. I have even tried just replacing my call to this.loadMore.bind(this) with {(e) => console.log("load more: ", e)} and still nothing.

Thanks, Justin

[BrennonG]

I’ve got the same issue - can’t get loadMore() to fire when scrolling down page, and have tried the solutions mentioned above. Can’t figure out what I’m missing here.

I’ve pulled my data-fetching out of loadMore() - just trying to get it to fire… scratching my head…

—UPDATE---- ----okay - adding a solution that is working for me— In general, the loadMore() function wasn’t connecting or firing w/ scroll event listener - still not sure why. So I manually added the scroll event listener in componentDidMount, and then defined scroll-point at which I wanna grab more data. Seems to be working.

[ZeroCool-85]

I had the same problem, fixed by deleting ->

#root {
  overflow: auto;
}