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