时间戳

首页 > 解决方案 > 如何在 React 上正确开发分页？

javascript - 如何在 React 上正确开发分页？

问题描述

我正在尝试实现一些分页，但出现错误。

分页最大大小设置为每页 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

所以我猜这是 slice 方法中的一些东西不能正常工作或者可能是状态。

在渲染方法中，我有这个console.log({ STATE_DATA: data });，每次我更改页面时它都会显示项目的数量，但是如果我来回做我提到的，表格会越来越多的项目。

我会错过什么？

这是我正在使用的数据表组件-> http://react.carbondesignsystem.com/?path=/story/datatable--default

和分页-> http://react.carbondesignsystem.com/?path=/story/pagination--pagination

标签： javascriptreactjsecmascript-6

解决方案

像这样更改您的代码，不要直接更改数据，否则您将丢失分页的所有其他数据，请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}
        />
     <>

    )
  }

}

推荐阅读