基于页外拼接数据

Question

import React,{Component}  from 'react';
import Pagination from "@material-ui/lab/Pagination";
import axios from 'axios';

class Limit extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
          api: [''],
          perPage:2,
          currentPage:1,
          totalPage:0
        }
      }
    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
          .then(res => {
           
            const start = this.state.currentPage* this.state.perPage - this.state.perPage;
            const end = start + this.state.perPage;
            const api = res.data.splice(start,end)
            this.setState({api});
            this.setState({totalPage:res.data.length/this.state.perPage})
          })
    }
    handleChange = (value) => {
        this.setState({currentPage: value});
        axios.get(`https://jsonplaceholder.typicode.com/users`)
        .then(res => {
         
          const start = this.state.currentPage* this.state.perPage - this.state.perPage;
          const end = start + this.state.perPage;
          const api = res.data.splice(start,end)
          this.setState({api});
        })
          
    };
    render()
    {
         return (
            <><ul>
                 {this.state.api
                     .map(person => <li key={person.id}>{person.name}</li>
                     )}
             </ul><Pagination count={this.state.totalPage} page={this.state.currentPage} onChange={this.handleChange.bind(this)} /></>
        );
    }
   
}

export default Limit

它似乎在开始时显示了我想要的 2 个 api 值，但总页数已关闭，应该是 5，句柄更改没有获得更多数据。当打印出 handlechange 中的值时，我得到的是对象而不是值。

Answer 1

当您使用 splice 时，您正在修改原始数组本身。最初 api 数据有 10 个元素。当您对 api 数据执行拼接操作时，您删除了 2 个元素，现在 api 数据中的总元素为 8。然后您计算 api 数据的总页数为 8 / 2 = 4.

您可以通过在拼接 api 数据数组之前计算总页数来解决此问题。

componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`).then((res) => {
      const start =
        this.state.currentPage * this.state.perPage - this.state.perPage;
      const end = start + this.state.perPage;
      const totalPage = res.data.length / this.state.perPage;
      const api = res.data.splice(start, end);
      this.setState({ api, totalPage });
    });
  }

此外，这不是实现分页的好方法，因为当您只需要 1 页数据时，您正在获取 5 页的数据。您可以使用 api url.

中的查询参数仅获取当前页面数据

例如：https://jsonplaceholder.typicode.com/users?_page=0&_limit=2

上面url只会给你当前页面的元素，你不需要做拼接操作和额外的工作。

基于页外拼接数据

Splice data based off page

pagination

reactjs