Question

我正在尝试将我在React中使用JSON服务器的JSON数据分页。我目前正在使用splice将数据分成每页10个项目的页面。为了从每个接头获取数据，我有一个无序列表，其中列表项被分配数据。我实际上只想拥有页面和下一个按钮而不是将每个页面列在页面顶部，但我似乎无法绕过它。我想使用_page _limit。任何帮助，将不胜感激。这是代码。

import React, { Component } from 'react';
// added axios to assist with API calls.
import axios from 'axios';

import './App.css';
import Card from './Card.js';
import SearchBar from "./SearchBar.js"
import star from './images/star.svg';
import wars from './images/wars.svg';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      people: []
    }
  }

  componentDidMount() {
    this.getPeopleData();
  }

  getPeopleData(search) {
    axios.get('http://localhost:3008/people?_start=0&_end=9&q=' + search).then((response) => {
      this.setState ({
        people: response.data
      });
    });
  }


  //1. Using axios and decided to use the slice method rather than the _page _limit from https://github.com/typicode/json-server#slice
  limitPerPage (begin, end) {
    axios(`http://localhost:3008/people?_start=${begin}&_end=${end}`).then((response) => {
      this.setState ({
        people: response.data
      });
    });
  }
  
  render() {
    return (
      <div className='content'>
        <div className='logo'>
          <img src={star} alt="star-logo" />
          <span className='interview-text'>The Interview</span>
          <img src={wars} alt="wars-logo" />
        </div>


        <h2>Cards</h2>

        {/* Decided to display the card pages as a list. Each page holds 10 cards */}
        <ul className="card-pagination">
          <li>
            <a onClick={() => this.limitPerPage(0, 9)}>Page 1</a>
          </li>

          <li>
            <a onClick={() => this.limitPerPage(10, 19)}>Page 2</a>
          </li>

          <li>
            <a onClick={() => this.limitPerPage(20, 29)}>Page 3</a>
          </li>

          <li>
            <a onClick={() => this.limitPerPage(30, 39)}>Page 4</a>
          </li>

          <li>
            <a onClick={() => this.limitPerPage(40, 49)}>Page 5</a>
          </li>

          <li>
            <a onClick={() => this.limitPerPage(50, 59)}>Page 6</a>
          </li>

          <li>
            <a onClick={() => this.limitPerPage(60, 69)}>Page 7</a>
          </li>

          <li>
            <a onClick={() => this.limitPerPage(70, 79)}>Page 8</a>
          </li>

          <li>
            <a onClick={() => this.limitPerPage(80, 89)}>Page 9</a>
          </li>
        
        </ul>

        {this.state.people.map((person) => {
          return <Card
                    key={person.id}
                    id={person.id}
                    name={person.name}
                    imageURL={('http://localhost:3008/' + person.image)}
                    birthday={person.birth_year}
                    planetList={this.state.planets}
                    homeWorld={person.homeworld}
                  />
        })}
      </div>
    );
  }
}

export default App;

Answer 1

constructor(props) {
  super(props);
  this.state = {
    people: [],
    _page_limit: 10,
    currentPage: 0
  }
}

...

limitPerPage (begin, end, increase) {
  axios(`http://localhost:3008/people?_start=${begin}&_end=${end}`).then((response) => {
    this.setState ({
      people: response.data,
      currentPage: this.state.currentPage + increase
    });
  });
}

_renderLinks() {
  var cp = this.state.currentPage
  if (cp == 0) {
    // show only "Page 1" and "Next"
    return (
      <ul className="card-pagination">
        <li>Page 1</li>
        <li><a onClick={() => this.limitPerPage(10, 20, 1)}>Next</a></li>
      </ul>
    )
  } else if (cp < this.state._page_limit - 1) {
    // show "Back", "Page X" and "Next"
    return (
      <ul className="card-pagination">
        <li><a onClick={() => this.limitPerPage((cp-1) * 10, cp * 10), -1}>Back</a></li>
        <li>Page {(cp + 1}</li>
        <li><a onClick={() => this.limitPerPage((cp+1) * 10, (cp+2) * 10, 1}>Next</a></li>
      </ul>
    )
  } else {
    // show "Back", "Page X" and "Next"
    return (
      <ul className="card-pagination">
        <li><a onClick={() => this.limitPerPage((cp-1) * 10, cp * 10, -1)}>Back</a></li>
        <li>Page {(cp-1)}</li>
      </ul>
    )
  }
}

render() {
    var _page_limit = 10
    return (
      <div className='content'>
        <div className='logo'>
          <img src={star} alt="star-logo" />
          <span className='interview-text'>The Interview</span>
          <img src={wars} alt="wars-logo" />
        </div>


        <h2>Cards</h2>

        {this._renderLinks()}

        {this.state.people.map((person) => {
          return <Card
            key={person.id}
            id={person.id}
            name={person.name}
            imageURL={('http://localhost:3008/' + person.image)}
            birthday={person.birth_year}
            planetList={this.state.planets}
            homeWorld={person.homeworld}
            />
        })}
      </div>
    );
  }
}

表达式[...Array(_page_limit).keys()]是创建0到（_page_limit - 1）之间的数字数组的快捷方式。

用json-server和React.js分页

1 个答案: