使用 django Api 反应 Antd 分页答案

【问题标题】：React Antd Pagination With django Api使用 django Api 反应 Antd 分页
【发布时间】：2021-04-15 23:10:30
【问题描述】：

我正在尝试使用 antd 分页对来自分页 api 的帖子列表进行分页，下面的代码是我想要做的，但我不知道如何让它工作。

我在 React 中使用 Antd Pagination，在 Django Rest Api 中使用 LimitOffsetPagination。

class Archive extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            posts: [],
            offset:0 
          };

          this.handleChange = this.handleChange.bind(this);
      }

      handleChange () {
        this.offset = this.offset + 4
      };

    async componentDidMount() {
        axios.get('/api/Post?limit=4&offset='+ offset)
        .then((response) => {
            this.setState({
                posts: response.data.results,
                loading: false
            })
            })             
    }

    render() {
        return (
            <React.Fragment>
        { this.state.posts.map((post) => {
                return (
                    
                  <div>
                            <a href={`/Post/${post.id}`}>
                            <img src={post.image}  width="500" height="275"/>
                        </a>
                     
                      <div>
                        <div class="">
                        <Link to={`/Post/${post.id}`}>
                            {" "}
                            {post.title}{" "}
                            </Link>
                        </div>
                      </div>
                    </div>
                );
              })}
              
              <Pagination
              defaultCurrent={2}
              defaultPageSize={4}
              onChange={this.handleChange}
              total={300}
            />
            </React.Fragment>   
        )
    }
}

【问题讨论】：

标签： reactjs django-rest-framework pagination

【解决方案1】：

解决办法

import React, { useState, useEffect } from 'react';
import {Link} from "react-router-dom";
import { Pagination } from 'antd';


function Archive() {
const [loading, setloading] = useState(true);
const [posts, setposts] = useState([]);
const [offset, setoffset] = useState(0);

function handleChange (value){
  setoffset((value - 1) * 4);
};


      
const getPosts = async () => {
  const response = await fetch('/api/Post?limit=4&offset='+ offset)
  
  const posts = await response.json();
  setposts (posts.results),
  setloading(false)
};

  

useEffect(() => {
  getPosts();
}, [offset]);

      
      if (loading) {
          return <div>loading...</div>;
      }
      return (
          <React.Fragment>
              <div class="row">
              
      { posts.map((post) => {
        const { id, image, date_created, title } = post;
              return (
                  
                <div class="col-md-6 col-6 paddding animate-box" data-animate-effect="fadeIn">
                  <div>
                          <a href={`/Post/${id}`}>
                          <img src={image}  width="500" height="275"/>
                      </a>
                    <div class="fh5co_suceefh5co_height_position_absolute"></div>
                    <div class="fh5co_suceefh5co_height_position_absolute_font_2">
                      <div class="">
                      <a href="#" class="color_fff"> <i class="fa fa-clock-o"></i>&nbsp;&nbsp;{date_created}</a>
                      </div>
                      <div class="">
                      <Link to={`/Post/${id}`}>
                          {" "}
                          {title}{" "}
                          </Link>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}</div>
            <Pagination
            defaultCurrent={1}
            defaultPageSize={4} //default size of page
            onChange={handleChange}
            total={300} //total number of card data available
          />
          </React.Fragment>   
      )
  }

导出默认存档；

【讨论】：