React 分页

React 获取接口数据实现分页效果

以拼多多接口为例实现

思路

加载前
	加载动画
加载后
	判断有内容的时候
	无内容的时候

用到的知识点

1、动画效果（用在加载前，加载之后就隐藏或关闭，用开关效果即可）
2、axios请求
3、map渲染页面
4、分页插件（antd）

代码实现

import React, { Component } from 'react';
//引入axios
import axios from 'axios';
//引入antd插件
import { Pagination } from 'antd';

class Views extends Component {
  constructor(props) {
    super(props);
    this.state = {
    //动画开关
      loading:true,
      //空数组
      lists: [],
      //关于分页
      setPagecfg: {
        currentPage: 1,
        totalPage:10,
      }
    }
    //解决this指向问题
    this.getPdd=this.getPdd.bind(this)
  }
  //函数，记得传参对应，名字随意记得调用就行
  getPdd(page, pagesize = 10) {
    const _this = this
    //请求接口
    axios.get('home/mediareports', {
      params: {
        'page_number': page,
        'page_size': pagesize
      }
    }).then((res)=> {
    //成功时
      if (res.data.code === 200) {
        // console.log(res.data.data)
        //修改state的内容
        _this.setState({
          lists: res.data.data,
          setPagecfg: {
            currentPage: page,
            totalPage:res.data.total
          }
        })
      }
      //加载成功动画关闭
      _this.setState({
        loading: false,
      })
    })
  }
  //挂载后 里面调用函数
  componentDidMount() {
  //定时器加载的时间
    setTimeout(() => {
        this.getPdd(1);
    }, 1000)
  }
  // 渲染
  list() {
    return(
      this.lists =  this.state.lists.map((val, index) => 
      <li key={index}>
        {val.id}---{val.main_title}---{ val.source}---{val.sourceDate}
      </li>
      ))
  }
  render() {
    const {  lists,loading ,setPagecfg} = this.state
    return (
      <div className='page'>
        {loading ? <div className="loading_box">
          <div className="loading"></div>
        </div> : (lists.length !== 0 ? <ul> {this.list()}</ul> : <div className='no_result'>小猪~，你还没有收益</div>)}
        {
          lists.length!==0?<Pagination onChange={this.getPdd} defaultCurrent={setPagecfg.currentPage} total={setPagecfg.totalPage} />:''
        }
      </div>
    );
  }
}

export default Views;

安装antd

yarn add antd
 npm install antd --save