React状态的改变不会导致组件重新渲染

我仍然是新的ReactJS，我遇到了一点障碍。我试图在React组件中实现分页;然而，即使我的分页函数被成功调用，状态改变也不会导致组件再次渲染。

我使用一个函数来获取初始数据(getMainFeed)，然后第二个函数(getMoreItems)用于分页。第二个函数由我的' handlesroll '函数调用。有趣的是，当我用"getMainFeed"函数替换"getMoreItems"函数时，状态变化会导致组件完美地呈现额外的数据。不幸的是，我需要击中这两个单独的api，我不认为这将是一个很好的形式，将两个调用合并到一个函数。那么有没有一种方法，我可以得到'getMoreItems'渲染新的项目到屏幕上?

var data = [];

var GridView = React.createClass({
  getInitialState: function() {
    window.addEventListener("scroll", this.handleScroll);
    return {
      data: [],
      page: 0,      //for pagination
      loadingFlag: false,
    };
    },
  getMainFeed: function() {
    var nextPage = 1; //increase the page count
    ajax_url = "http://127.0.0.1:8200/api/content/main/";
    ajax_type = "GET";
    ajax_data = {
       'BatchCount': "20"
    };
    $.ajax({
       url: ajax_url,
       type: ajax_type,
       contentType: 'application/x-www-form-urlencoded',
       data: ajax_data,
       dataType: 'json',
    success: function(data) {
      this.setState({
        data: data,
        loadingFlag:false,
        page: 2
      });
      //loading("off");
    }.bind(this),
    error: function(xhr, status, err) {
      console.error(this.props.url, status, err.toString());
    }.bind(this)
    });
   }, //end function
   getMoreItems: function() {
    var nextPage = this.state.page+1; //increase the page count
    ajax_url = "http://127.0.0.1:8200/api/content/page/1/";
    ajax_type = "GET";
    ajax_data = {
       'BatchCount': "20"
    };
    $.ajax({
       url: ajax_url,
       type: ajax_type,
       contentType: 'application/x-www-form-urlencoded',
       data: ajax_data,
       dataType: 'json',
    success: function(data) {
      this.setState({
        data: data,
        loadingFlag:false,
          page: nextPage
      });
    }.bind(this),
    error: function(xhr, status, err) {
      console.error(this.props.url, status, err.toString());
    }.bind(this)
    });
 }, //end function
  componentDidMount: function() {
    //loading("on");
    this.getMainFeed();
  },
  handleScroll:function(e){
    //this function will be triggered if user scrolls
    var windowHeight = $(window).height();
    var inHeight = window.innerHeight;
    var scrollT = $(window).scrollTop();
    var totalScrolled = scrollT+inHeight;
    if(totalScrolled+1200>windowHeight){  //user reached at bottom
      if(!this.state.loadingFlag){  //to avoid multiple request 
          this.setState({
            loadingFlag:true,  
          });
          //loading("on");
          this.getMoreItems();
      }
    }
  },
  componentDidUpdate: function() {
    $('#grid-container').imagesLoaded( function() {
      MasonryInit();
    }); 
  },
  render: function() {
      return (
        <div id="feed-container-inner">
          <GridMain data={this.state.data} />
        </div>
      );
    }
  });