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