Как разбить данные на страницы?

Question

Как я могу реализовать разбиение на страницы для отображения 10 объектов на странице? Вот моя песочница:

https://codesandbox.io/s/rvo801wyp

Answer 1

Есть две вещи, которые нужно сделать:

1. Вам нужно либо связать handlePageChange в конструкторе, либо преобразовать его в функцию стрелки
2. Добавить фрагмент для удаления из items данных, которые не будут отображаться .slice(this.state.activePage * this.state.itemsCountPerPage,(this.state.activePage + 1) * this.state.itemsCountPerPage)

Посмотрите на мои изменения в коде:

https://codesandbox.io/s/k58z3r9115

Я также добавил динамически itemsCountPerPage к состоянию

Answer 2

Есть два способа достижения этой цели,

• Нумерация страниц с использованием API

  сделать API для обработки некоторых параметров запроса, таких как

   {
      **per_page_limit**: <no of record on a single page>,
      **current_page**: <current page number>,
      ....other request param
   }
  

• Пагинация на стороне клиента

  извлеките все записи и создайте нумерацию страниц, для этого получите длину списка и на основе ваших требований создайте страницы, например всего записей: 100 на страницу ограничение: 10, поэтому общее количество страниц будет 10 теперь для отображения только данных для страницы используйте setState, а для данных

  list_data_to_display = list.slice (0, page * limit)

  this.setState ({slow_list: list_data_to_display})

handlePageChange = (pageNumber) => {}

Решение будет:

this.state = {
      items: [],
      isLoading: false,
      activePage: 1,
      itemsCountPerPage: 1,
      totalItemsCount: 1,
      **show_list**: []
    };

show_list_data = () => {
    const show_list_data = this.state.items.slice(0, 10);
    this.setState({
      show_list: show_list_data
    });
  };

  componentDidMount() {
    fetch("https://demo9197058.mockable.io/users")
      .then(res => res.json())
      .then(json => {
        this.setState(
          {
            items: json,
            isLoading: true
          },
          this.show_list_data
        );
      });
  }
  handlePageChange = pageNumber => {
    console.log(`active page is ${pageNumber}`);

    const show_list_data = this.state.items.slice(
      (pageNumber - 1) * 10,
      pageNumber * 10
    );
    this.setState({
      show_list: show_list_data,
      activePage: pageNumber
    });
};

render() {
        var {  show_list, isLoading } = this.state;
        if (!isLoading) {
          return <div> loadding....</div>;
        } else {
          return (
            <div>
              <ul>
                {show_list.map(item => (

                ....
                ....