Reactjs 使用django Api对Antd分页进行反应

我正在尝试使用antd分页从一个分页的api中对文章列表进行分页。下面的代码是我想要做的，但我不知道如何使它工作

我在React中使用Antd分页，在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>   
        )
    }
}

类存档扩展组件{
建造师（道具）{
超级（道具）；
此.state={
加载：对，
员额：[]，
偏移量：0
};
this.handleChange=this.handleChange.bind（this）；
}
handleChange（）{
this.offset=this.offset+4
};
异步组件didmount（）{
获取（'/api/Post？limit=4&offset='+offset）
。然后（（响应）=>{
这是我的国家({
帖子：response.data.results，
加载：错误
})
})             
}
render（）{
返回(
{this.state.posts.map（（post）=>{
返回(
{" "}
{post.title}{”“}
);
})}
)
}
}

以下是解决方案

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>   
      )
  }

import React，{useState，useffect}来自“React”；
从“react router dom”导入{Link}；
从“antd”导入{Pagination}；
函数存档（）{
const[loading，setloading]=useState（true）；
const[posts，setposts]=useState（[]）；
const[offset，setoffset]=useState（0）；
函数句柄更改（值）{
设置偏移量（（值-1）*4）；
};
const getPosts=async（）=>{
const response=wait fetch（'/api/Post？limit=4&offset='+offset）
const posts=wait response.json（）；
设置柱（柱。结果），
设置加载（错误）
};
useffect（（）=>{
getPosts（）；
}，[抵销]；
如果（装载）{
返回装载。。。；
}
返回(
{posts.map（（post）=>{
const{id，image，创建日期，title}=post；
返回(
{" "}
{title}{”“}
);
})}
)
}

导出默认档案