分页 React.js 一次有 10 个项目答案

【问题标题】：Pagination React.js with 10 items at a time分页 React.js 一次有 10 个项目
【发布时间】：2017-10-20 09:47:03
【问题描述】：

我是 React.js 的新手，我正在尝试使用 React.js 实现分页，并进行一些过滤。从服务器检索数据后，我不会一次获取所有数据，而是最多 10 个项目。我不确定是什么或如何处理它。我读了这个documentation，想知道你是否可以实现分页，但不知道该怎么做。此外，有没有办法按名称过滤项目，例如搜索以字母“A”开头的项目并使用分页？这是我写到现在的代码：

import React, { Component } from 'react';
import axios from 'axios';

import List from './List';

class Search extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: {
        first: '',
        last: ''
      }
    }

    this.getName = this.getName.bind(this);
  }

  getName() {
    axios.get('http://nameserver/people')
      .then(res => res.json())
      .then((response) => {
        this.setState({
          name: response.data
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }

  render() {
    return (
      <div >
        <input placeholder='Search Name' />
        <button onClick={this.getName}>Find</button>
        <List first={this.state.name.first} last={this.state.name.last} />
      </div>
    );
  }
}

export default Search;

感谢您的帮助。谢谢。

【问题讨论】：

标签： javascript reactjs pagination

【解决方案1】：

您要做的就是用查询构造 字符串，然后将其传递给axios，总有办法做任何事情。

简单示例：

let query = 'http://nameserver.com/'
query += '/posts?title_like=A'    // you can use RegExp 
query += '?_page=1&_limit=10'

仔细阅读您发布的文档。

【讨论】：