Question

我是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;

我感谢任何帮助。感谢。

Answer 1

您需要做的是使用查询构建字符串，然后将其传递给axios并始终有办法执行任何操作。

简单示例：

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

仔细阅读您发布的文档。

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

1 个答案: