react 分页组件react-infinite-scroller的使用

state定义所需初始值

   this.state = {
      hasMore: true,
      pageNum: 1,
      pageSize: 10,
      data: []
    };

加载更多

// 获取下一页信息
不需要在 componentDidMount()获取数据设置hasMore为true时已经开始加载第一页数据了

  getMore = () => {
    this.$post("/community/list", {
      pageNum: this.state.pageNum,
      pageSize: this.state.pageSize
    }).then(res => {
      this.setState({
        pageNum: this.state.pageNum + 1,
        hasMore: res.data.hasNextPage,
        data: this.state.data.concat(res.data.list)//数组连接
      });
    });
  };

render内容区域

 render() {
    const data = this.state.data;
    return (
      

        
              Loading ...
            
          }
          useWindow={false}  //****将滚动侦听器添加到窗口，或者添加组件的parentNode****
          hasMore={this.state.hasMore}
        >
          {this.renderItemList(data)}  //自定义渲染内容可以在这写也可以提出来
        
      

); }