Splice data based off page-CodePudding

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

It seems to display the 2 api values I want at the start but the total pages are off which should be 5 and the handle changes doesn't get any more data. When printing out the value in the handlechange I get object instead of the value.

CodePudding user response：

When you use splice you are modifying the original array itself. Initially api data has 10 elements. When you performed the splice operation on api data you removed 2 elements and now the total elements in api data are 8. Then you calculated total pages on api data which is 8 / 2 = 4.

You can fix this by calculating the total pages before splicing the api data array.

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

Also this is not a good way to implement pagination as you are fetching data for 5 pages when you need only 1 page data. You can fetch only the current page data by using query params in the api url.

For example: https://jsonplaceholder.typicode.com/users?_page=0&_limit=2

This above url will give you only the elements for current page and you will not need to do splice operation and extra work.