反應狀態變化不導致組件重新渲染

Question

我還是ReactJS的新手，遇到了一些麻煩。 我正在嘗試在React組件中實現分頁； 但是，即使我的分頁功能被成功調用，狀態更改也不會導致組件再次呈現。

我正在使用一個函數來獲取初始數據（getMainFeed），然后使用第二個函數（getMoreItems）進行分頁。 第二個函數由我的“ handleScroll”函數調用。 有趣的是，當我將“ getMoreItems”函數替換為“ getMainFeed”函數時，狀態更改導致組件完美地呈現了其他數據。 不幸的是，我需要使用這兩個單獨的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>

      );
    }
  });

Answer 1

狀態更改后，它將重新呈現。 您還看到它正在與getmainfeed函數一起使用。

因此，我認為您的getmoreitems函數只是不成功。 您已驗證此呼叫成功嗎？

Answer 2

問題出在我沒有將數據連接到現有數據的末尾，就像data一樣data: this.state.data.concat(data),

這讓我感到驚訝，因為我期望getMoreItems函數可以簡單地替換現有數據。