Question

我还是ReactJS的新手，我遇到了一些麻烦。我正在尝试在React组件中实现分页;但是，即使我的分页功能被成功调用，状态更改也不会导致组件再次渲染。

我正在使用一个函数来获取初始数据（getMainFeed），然后使用第二个函数（getMoreItems）进行分页。第二个函数由我的'handleScroll'函数调用。有趣的是，当我用'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>

      );
    }
  });

Answer 1

当状态改变时，它将重新渲染。你也看到它正在使用你的getmainfeed函数。

所以我认为你的getmoreitems功能只是没有成功。你确认这次通话成功吗？

Answer 2

问题结果是我没有将数据连接到现有数据的末尾，如data: this.state.data.concat(data),。

这让我感到惊讶，因为我原本期望getMoreItems函数只是替换现有数据。

反应状态更改不会导致组件重新渲染

2 个答案: