如何在 Reactjs 中使用 axios 获取请求添加分页

Question

我正在使用 axios 接收 50 个带有 get 请求的数据，我想在我想要 5 个结果的每个页面上为我的代码添加分页，如何使用 axios 响应实现分页。

    import React from 'react';
    import axios from 'axios';

    export default class PersonList extends React.Component {
      state = {
        persons: []
      }

      componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/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>
        )
      }
    }

Answer 1

这是一个使用库paginate-array 对存储在组件状态中的数组项进行分页的简单示例。如果您检查paginate-array 的源代码，您会发现创建“页面”的逻辑相当简单，因此您可以使用它为您自己的分页实用程序提供灵感。此示例使用来自 JSONPlaceholder 的 Todos，但您可以根据需要修改示例。请记住，端点 https://jsonplaceholder.typicode.com/todos 没有属性为 name 的对象，如您的示例所示。此示例使用上一个/下一个按钮的单击处理程序对页码进行简单检查，以帮助确保无法选择无效页面。这个例子是假设你打算在组件加载时加载所有数据，而不是通过 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);
  }

  componentDidMount() {
    fetch(`https://jsonplaceholder.typicode.com/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;

这是一个基本的example 正在运行。该示例还提供了一种处理可变大小下拉菜单的方法。

希望对您有所帮助！