Maximum call stack size exceeded

Hi I used your component and the loadMore function called even I don’t scroll my code looks like this

componentWillMount(){
    this.state = {      
     allPhotos: [],
      showingPhotos:[],
      photos:[],
      tags:[],
      more:true,
      styleOpen:false,
      pageNumber:1,
      limit:12
    }
  }
  loadPhotos(){
    this.props.action_fetching();
    rp({
      method: 'GET',
      uri: 'http:/test/api/Photos',
      qs: {
        filter: {
          "include": {
            "relation": "profile",
            "scope":{
              "include":{
                "relation":"professional"
              }
            }
          },
          "offset":(this.state.pageNumber-1)*this.state.limit,
          "limit":this.state.limit
        }
      },
      json: true
    }).then(result => {
      this.shuffleArray(result);
      this.setState({
        allPhotos: this.state.allPhotos.concat(result),
        showingPhotos:result,
        more:!result.length<this.state.limit,
        pageNumber:this.state.pageNumber+1
        // photos:result.slice(0,18)
      })
      setTimeout(wait=>{
        this.props.action_fetching();
      }, 500);
    })
  }
  shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      let j = Math.floor(Math.random() * (i + 1));
      let temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }
    return array;
  }
  renderPhotos(){
    let photos = this.state.allPhotos;
    let renderObject=[];
    if (photos.length!==0) {
      for(let i=0;i<photos.length;++i)
        renderObject.push(photos[i]?<div className="col-4" styleName="card-container"><PhotoSearchCard key={i} photo={photos[i]}/></div>:"")
    }
    return (
      <div className="row">
        {renderObject}
      </div>
    )
  }
  render(){
    return (
      this.state.allPhotos?
        <div className="row">
          <div className="col-3" styleName="nav-container-left">
            <ImageSearchSideBar/>
          </div>
          <div className="col-9" styleName="image-search-container">
            <h3><FormattedMessage id="common.photos"/></h3>
            <hr/>
            <InfiniteScroll
              pageStart={0}
              loadMore={this.loadPhotos.bind(this)}
              hasMore={this.state.more}
              loader=
                {
                  <div className="loader">Loading ...</div>
                }>
              {this.renderPhotos()}
            </InfiniteScroll>
          </div>
        </div>
    );
  }

thanks for your help

[Gnurfos]

My problem was a misusage of React: I was setting the pagination state as soon as the request was sent, which caused the re-render and sending of other requests before the first one could complete.

Since I did not like updating pagination when the response is received (it could prevent correct parallelization), I went with implementing shouldComponentUpdate() to ignore pagination state changes.

@ssageghi from what little more I understand, you might be doing things in this.props.action_fetching(); that cause an immediate re-render (if you change anything to state, or more likely props, for example).

[Gnurfos]

I’m also getting this. What kind of mechanism is supposed to prevent the loadMore function from being called repeatedly (while waiting for the first calls to asynchronously complete) ?