I'm using infinite-scroll-component and next is not hitting fetchMoreData about react-infinite-scroll-component

[jgroh9]

@infinitescrollissue @benistary I too had this same issue. In my case, the problem was related to the dataLength attribute. I had initially set it to the total count of all the records in the collection that I was trying to load, but it had to be set to the current length of the data being displayed. In the below example I originally had set dataLength={500} but this only called fetchMoreItems() once. After changing to dataLength={this.state.items.length} things started working as expected.

this.state = { items: [], hasMoreItems: true };

fetchMoreItems() {
  if (this.state.items.length >= 500) {
    this.setState({ hasMoreItems: false });
    return;
  }

  // a fake async api call
  setTimeout(() => {
    this.setState({
      items: this.state.items.concat(Array.from({ length: 20 }))
    });
  }, 500);
}

<InfiniteScroll
  dataLength={this.state.items.length}
  next={this.fetchMoreItems}
  hasMore={this.state.hasMoreItems}
>
</InfiniteScroll>

Hope this helps

[Lesleytech]

@infinitescrollissue @benistary I too had this same issue. In my case, the problem was related to the dataLength attribute. I had initially set it to the total count of all the records in the collection that I was trying to load, but it had to be set to the current length of the data being displayed. In the below example I originally had set dataLength={500} but this only called fetchMoreItems() once. After changing to dataLength={this.state.items.length} things started working as expected.

this.state = { items: [], hasMoreItems: true };

fetchMoreItems() {
  if (this.state.items.length >= 500) {
    this.setState({ hasMoreItems: false });
    return;
  }

  // a fake async api call
  setTimeout(() => {
    this.setState({
      items: this.state.items.concat(Array.from({ length: 20 }))
    });
  }, 500);
}

<InfiniteScroll
  dataLength={this.state.items.length}
  next={this.fetchMoreItems}
  hasMore={this.state.hasMoreItems}
>
</InfiniteScroll>

Hope this helps

Thanks a million. This solved the problem

[benistary]

I have same problem. next prop calls fetchMoreData only when the array data has lenght 3 or more.

And yes I have scroll bar visible when page is initialised.

[tommyalvarez]

@infinitescrollissue did you set the prop more as true when fetching the first page of records? It's working for me. I have just implemented it

[ankeetmaini]

@infinitescrollissue in the first load of your data, make sure there's a scroll, in case your items are too less to cause a scroll the onScroll listener will not trigger.

[nishalk01]

Thanks that helped a lot

[nilesh-jagtap-patona]

@infinitescrollissue @benistary I too had this same issue. In my case, the problem was related to the dataLength attribute. I had initially set it to the total count of all the records in the collection that I was trying to load, but it had to be set to the current length of the data being displayed. In the below example I originally had set dataLength={500} but this only called fetchMoreItems() once. After changing to dataLength={this.state.items.length} things started working as expected.

this.state = { items: [], hasMoreItems: true };

fetchMoreItems() {
  if (this.state.items.length >= 500) {
    this.setState({ hasMoreItems: false });
    return;
  }

  // a fake async api call
  setTimeout(() => {
    this.setState({
      items: this.state.items.concat(Array.from({ length: 20 }))
    });
  }, 500);
}

<InfiniteScroll
  dataLength={this.state.items.length}
  next={this.fetchMoreItems}
  hasMore={this.state.hasMoreItems}
>
</InfiniteScroll>

Hope this helps

Thanks a million. This solved the problem

---

Thats awesome, helped me a lot, this was the exact mistake I was doing ... Thanks a ton man

[mertyldrr]

Thanks a lot, I was trying to understand where the problem is. A bit more explanatory text for dataLength would be good. It is hard to understand if it's total length of data or currently displayed data length (at least for me).

[GokulSuresh27]

@infinitescrollissue @benistary I too had this same issue. In my case, the problem was related to the dataLength attribute. I had initially set it to the total count of all the records in the collection that I was trying to load, but it had to be set to the current length of the data being displayed. In the below example I originally had set dataLength={500} but this only called fetchMoreItems() once. After changing to dataLength={this.state.items.length} things started working as expected.

this.state = { items: [], hasMoreItems: true };

fetchMoreItems() {
  if (this.state.items.length >= 500) {
    this.setState({ hasMoreItems: false });
    return;
  }

  // a fake async api call
  setTimeout(() => {
    this.setState({
      items: this.state.items.concat(Array.from({ length: 20 }))
    });
  }, 500);
}

<InfiniteScroll
  dataLength={this.state.items.length}
  next={this.fetchMoreItems}
  hasMore={this.state.hasMoreItems}
>
</InfiniteScroll>

Hope this helps

Thanks a lott Man.