javascript - 如何在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}
        />
     <>

    )
  }

}