loadmore gets called infinitely

I have a tree component and I’m trying to display 100 items at a time. I don’t have any ajax calls to make to load next set of item.

Here’s what the code looks like:

class Tree extends Component {
  static propTypes = {
    searchModeOn: PropTypes.bool
  }

  constructor(props) {
    super(props)

    this.pageSize = 100

    this.computeInstanceProps(props)

    this.state = {
      items: this.allVisibleNodes.slice(0, this.pageSize),
      hasMore: this.hasMore()
    }
  }

  componentWillReceiveProps = nextProps => {
    this.computeInstanceProps(nextProps)
    this.setState({ items: this.allVisibleNodes.slice(0, this.pageSize), hasMore: this.hasMore() })
  }

  computeInstanceProps = props => {
    this.allVisibleNodes = props.items            // props.items is the list of all items. 
    this.totalPages = this.allVisibleNodes.length / this.pageSize
    this.currentPage = 1
  }

  hasMore = () => {
    return this.currentPage <= this.totalPages
  }

  loadMore = page => {
    const start = this.pageSize * (page - 1)
    const nextItems = this.allVisibleNodes.slice(start, start + this.pageSize)
    this.currentPage = page
    this.setState({ items: nextItems, hasMore: this.hasMore() })
  }

  render() {
    console.log('re', this.props, this.state)
    const { searchModeOn } = this.props

    return (
      <ul className={`root ${searchModeOn ? 'searchModeOn' : ''}`}>
        <InfiniteScroll
          pageStart={0}
          initialLoad
          loadMore={this.loadMore}
          hasMore={this.state.hasMore}
          loader={
            <div className="loader" key={0}>
              Loading ...
            </div>
          }
          useCapture
          useWindow={false}
        >
          {this.state.items}
        </InfiniteScroll>
      </ul>
    )
  }
}

I’ve tried various combinations of initialLoad, hasMore, loadMore but either it stops after first load or keeps firing loadMore until it has reached the last page (the above code will keep firing loadMore)

[lyyourc]

Set a lock like loading to prevent infinite loops

async function loadMore() {
  if (this.state.loading) {
    return 
  }

  this.setState({ loading: true })
  await fetchUser()
  this.setState({ loading: false)
}

[raymondshiner]

For those using functional react to accomplish this, you will also have to set awaits on your setState methods as react hooks for useState are asynchronous

const onLoadMore = async () => {
    if (listIsLoading) {
      return;
    }
    await setListIsLoading(true);
    await fetchMore();
    await setListIsLoading(false);
};