admin管理员组文章数量:1330415
I am receiving 50 data with get request using axios, and I want to add pagination to my code on every page i want 5 results, how to implement pagination with axios response.
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
ponentDidMount() {
axios.get(``)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<div>
<ul>
{ this.state.persons.map(person => <li>{person.name}</li>)}
</ul>
<button onClick={this.previousPage}>PreviousPage</button>
<button onClick={this.nextPage}>Next Page</button>
</div>
)
}
}
I am receiving 50 data with get request using axios, and I want to add pagination to my code on every page i want 5 results, how to implement pagination with axios response.
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
ponentDidMount() {
axios.get(`https://jsonplaceholder.typicode./Todos`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<div>
<ul>
{ this.state.persons.map(person => <li>{person.name}</li>)}
</ul>
<button onClick={this.previousPage}>PreviousPage</button>
<button onClick={this.nextPage}>Next Page</button>
</div>
)
}
}
Share
asked Sep 27, 2018 at 16:12
Supriya BhartSupriya Bhart
891 gold badge3 silver badges12 bronze badges
3
- Possible duplicate of Paginate Javascript array – Alexander Staroselsky Commented Sep 27, 2018 at 16:23
-
1
This isn't about React and Axios, you are asking about paginating a JavaScript array. What properties do you think you'd need to store and manipulate in state to achieve this? What Array.prototype methods such as
slice()
could you use to take a certain portion of thepersons
for eachpage
taking account some kind of pagesize
? – Alexander Staroselsky Commented Sep 27, 2018 at 16:26 - ha can you please help – Supriya Bhart Commented Sep 27, 2018 at 17:34
1 Answer
Reset to default 4Here is a simple example using library paginate-array to paginate array items stored in the ponent's state. If you inspect the source for paginate-array
, you'd see the logic for creating a "page" is fairly straightforward, so you may be able to use it for inspiration for your own pagination utilities. This example uses Todos from JSONPlaceholder, but you can modify the example as needed. Keep in mind the endpoint https://jsonplaceholder.typicode./todos
does not have objects with property name
as your example suggests. This example does simple checks for page numbers with the click handlers for the previous/next buttons to help ensure invalid pages cannot be selected. This example is assuming you plan to load all the data on the ponent loading, rather than requesting new pages of data via axios/fetch.
import React, { Component } from 'react';
import paginate from 'paginate-array';
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
todos: [],
size: 5,
page: 1,
currPage: null
}
this.previousPage = this.previousPage.bind(this);
this.nextPage = this.nextPage.bind(this);
}
ponentDidMount() {
fetch(`https://jsonplaceholder.typicode./todos`)
.then(response => response.json())
.then(todos => {
const { page, size } = this.state;
const currPage = paginate(todos, page, size);
this.setState({
...this.state,
todos,
currPage
});
});
}
previousPage() {
const { currPage, page, size, todos } = this.state;
if (page > 1) {
const newPage = page - 1;
const newCurrPage = paginate(todos, newPage, size);
this.setState({
...this.state,
page: newPage,
currPage: newCurrPage
});
}
}
nextPage() {
const { currPage, page, size, todos } = this.state;
if (page < currPage.totalPages) {
const newPage = page + 1;
const newCurrPage = paginate(todos, newPage, size);
this.setState({ ...this.state, page: newPage, currPage: newCurrPage });
}
}
render() {
const { page, size, currPage } = this.state;
return (
<div>
<div>page: {page}</div>
<div>size: {size}</div>
{currPage &&
<ul>
{currPage.data.map(todo => <li key={todo.id}>{todo.title}</li>)}
</ul>
}
<button onClick={this.previousPage}>Previous Page</button>
<button onClick={this.nextPage}>Next Page</button>
</div>
)
}
}
export default TodoList;
Here is a basic example in action. The example also has an approach to handling a changeable size dropdown.
Hopefully that helps!
本文标签: javascriptHowto add pagination with axios get request in ReactjsStack Overflow
版权声明:本文标题:javascript - Howto add pagination with axios get request in Reactjs - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742261776a2442646.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论