react-infinite-scroller使用

import React from 'react'
import InfiniteScroll from 'react-infinite-scroller'
import axios from 'axios'
import qs from 'qs'
import './style.less'

const arr = [ 'a', 'b', 'c', 'd', 'e']
export default class extends React.PureComponent {
  constructor (props) {
    super(props)

    this.state = {
      hasMore: true, // 是否开启下拉加载
      data: [], // 接受我每次的数据
      count: 10, //下拉加载
    }
    
    this.loadMoreData()
  }



  // 加载更多数据
  loadMoreData(){
    const { data, count } = this.state
    // 超过条数 禁止加载
    if (data.length >= count) {
　　　this.setState({
　　　　　hasMore: false　
　　  },()=>{

　　　　return false

　　  )
      
    }
    // page 是当前请求第几页数据
    // limit 每页我需要返回的数据条数
    axios.post('https://blogs.zdldove.top/Home/Apis/listWithPage',qs.stringify({page, limit: 20}))
      .then(res => {
        this.setState({
          data: [...data, ...arr], //拼接每次加载的数据 arr是我自定义的数据
          count: res.data.result.count, 
        }, () => {
         console.log(this.state) //查看数据是否已经改变
        })
      })
      .catch(err => console.log(err))
  }

  render () {
    const { hasMore } = this.state

    return (
      <div className="box">
          {/* 下拉加载 */}
        <InfiniteScroll
          pageStart={0} // 设置初始化请求的页数
          loadMore={()=>this.loadMoreData()}  // 监听的ajax请求
          hasMore={hasMore} // 是否继续监听滚动事件 true 监听 | false 不再监听
        >
          <div className="pages-hoc">
            {
              this.state.data.map((value, key) => (
                <p key={key}> {key} </p>
              ))
            }
          </div>
        </InfiniteScroll>
      </div>
    )
  }
}

 参考网址： https://www.jianshu.com/p/a7462c0255c8