Как правильно разработать нумерацию страниц на React?

Question

Я пытаюсь выполнить разбиение на страницы, но получаю сообщение об ошибке.

Максимальный размер разбиения на страницы установлен на 10 элементов на странице.

У меня есть массив из 17+ элементов,когда компонент монтируется, он правильно загружает первые 10 элементов, если я перехожу на следующую страницу, он также правильно загружает следующие элементы, но когда я возвращаюсь на предыдущую страницу, он загружает 12 элементов.Например, каждый раз, когда я возвращаюсь на следующую страницу, она загружает еще 2 элемента.

Вот что у меня есть:

const PAGINATION_PAGE_SIZE_DEFAULT = 10;

class ApaTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      headers: this.props.headers,
      data: this.props.data,
      page: 1,
      pageSize: PAGINATION_PAGE_SIZE_DEFAULT
    };
  }

  componentWillReceiveProps(nextProps) {
    const { data, headers } = nextProps;

    this.setState({ data: data.slice(0, this.state.pageSize), headers });
  }


  onPaginationChange = e => {
    let pageNumber = e.page;
    let pageSize = e.pageSize;
    let start = (pageNumber - 1) * pageSize;
    let end = pageNumber * pageSize;

    this.setState({
      data: this.props.data.slice(start, end),
      page: pageNumber,
      pageSize
   });
  }

  render() {
    const { data, headers } = this.state;

    console.log({ STATE_DATA: data });

    return (
     <>
        <DataTable
          rows={data}
          headers={headers}
          render={({ rows, headers, getRowProps, getTableProps }) => (...)} >...</DataTable>
        <PaginationV2
          totalItems={data.length}
          pageSize={PAGINATION_PAGE_SIZE_DEFAULT}
          pageSizes={[10, 20, 30]}
          onChange={this.onPaginationChange}
        />
     <>

    )
  }

}

Это компонент, который я использую: http://react.carbondesignsystem.com/?path=/story/pagination--pagination

Итак, я предполагаю, что это что-то в методе среза, которое не работает должным образом или, возможно, состояние.

В методе рендеринга у меня есть это console.log({ STATE_DATA: data });, и оно показывает количество элементов каждый разЯ изменяю страницу, но таблица продолжает получать все больше и больше элементов, если я делаю туда-сюда, как я упомянул.

Чего мне не хватает?

Это компонент данных, который я использую-> http://react.carbondesignsystem.com/?path=/story/datatable--default

и нумерация страниц -> http://react.carbondesignsystem.com/?path=/story/pagination--pagination

Answer 1

Измените свой код следующим образом: не меняйте данные напрямую, тогда вы потеряете все остальные данные для нумерации страниц, сохраняйте tableData отдельно.

const PAGINATION_PAGE_SIZE_DEFAULT = 10;

class ApaTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      headers: this.props.headers,
      data: this.props.data,
      tableData: this.props.data.slice(0, PAGINATION_PAGE_SIZE_DEFAULT),
      page: 1,
      pageSize: PAGINATION_PAGE_SIZE_DEFAULT
    };
  }

  componentWillReceiveProps(nextProps) {
    const { data, headers } = nextProps;

    this.setState({ tableData: data.slice(0, this.state.pageSize), data, headers });
  }


  onPaginationChange = e => {
    let pageNumber = e.page;
    let pageSize = e.pageSize;
    let start = (pageNumber - 1) * pageSize;
    let end = pageNumber * pageSize;

    this.setState({
      tableData: this.props.data.slice(start, end),
      page: pageNumber,
      pageSize
   });
  }

  render() {
    const { tableData, headers } = this.state;

    console.log({ STATE_DATA: tableData });

    return (
     <>
        <DataTable
          rows={tableDate}
          headers={headers}
          render={({ rows, headers, getRowProps, getTableProps }) => (...)} >...</DataTable>
        <PaginationV2
          totalItems={data.length}
          pageSize={PAGINATION_PAGE_SIZE_DEFAULT}
          pageSizes={[10, 20, 30]}
          onChange={this.onPaginationChange}
        />
     <>

    )
  }

}