Реагируйте: Как сделать разбиение на страницы отсортированных данных - PullRequest
Новая
       15

Реагируйте: Как сделать разбиение на страницы отсортированных данных

0 голосов
/ 19 марта 2019

Я работаю над проектом React. Где я беру данные через API и показываю их в пагинации. На самом деле я хочу сортировать данные в проекте, но проблема в том, что я уже реализовал нумерацию данных. В настоящее время я собираю данные и показываю их в разбивке на страницы, но я реализовал логику для сортировки. Когда я нажимаю на заголовок таблицы, данные сортируются, но все данные, которые хранятся в state, отображаются на одной странице. Я хочу отсортированные данные в разбивке по страницам, я новичок в React, Может кто-нибудь, пожалуйста, помогите мне, как реализовать нумерацию страниц для отсортированных данных. Вы также можете увидеть поток проекта в данном файле GIF.

Gif-файл (Пожалуйста, нажмите здесь, чтобы увидеть поток проекта, что я хочу)

код 

<code>    class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

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

  urlParams() {
    return `http://localhost:8001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}
) } } ReactDOM.render (, document.querySelector ('div # my-example'))

1 Ответ

0 голосов
/ 19 марта 2019

Поскольку у вас есть прямой / косвенный доступ к конечной точке API, вы должны выполнить там сортировку, разбиение на страницы, фильтрацию и т. Д. И вернуть нужные элементы во внешний интерфейс. Вызовы для нумерации страниц и т. Д. Должны быть запросом к API для этого конкретного запроса.

Если вы собираетесь разбивать на страницы и т. Д. С конечной точкой сервера, вам, вероятно, будет полезно изучить Redux, если вы этого еще не сделали.

IMO, если вы хотите опередить игру, изучите GraphQL и React Hooks, чтобы покончить с REST и React Classes соответственно.

ETA:

Проблемы с вызовами жизненного цикла в стороне, когда componentWillMount ( устарело - перейдите в конструктор ), он запускает первый get all parties API, поэтому при монтировании Первая страница, все выглядит хорошо.

В btnClick() вы устанавливаете Item, но, кажется, нигде не меняете его значение. Я ожидаю, что это, вероятно, ваша проблема.

...