Fatal编程技术网
  • javascript/
  • Javascript 如何正确开发分页？

Javascript 如何正确开发分页？

javascript reactjs ecmascript-6

Javascript 如何正确开发分页？,javascript,reactjs,ecmascript-6,Javascript,Reactjs,Ecmascript 6,我试图实现一些分页，但我得到了一个错误 分页最大大小设置为每页10个项目 我有一个17+项的数组，当组件装载时，它会正确加载前10项，如果我转到下一页，它也会正确加载下一项，但当我回到上一页时，它会加载12项。比如，每次我回到上一页/下一页，它都会加载另外两个项目 这就是我所拥有的： const PAGINATION_PAGE_SIZE_DEFAULT = 10; class ApaTable extends Component { constructor(props) { sup

我试图实现一些分页，但我得到了一个错误

分页最大大小设置为每页10个项目

我有一个17+项的数组，当组件装载时，它会正确加载前10项，如果我转到下一页，它也会正确加载下一项，但当我回到上一页时，它会加载12项。比如，每次我回到上一页/下一页，它都会加载另外两个项目

这就是我所拥有的：

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}
        />
     <>

    )
  }

}

const PAGINATION_PAGE_SIZE_DEFAULT=10；
类可扩展组件{
建造师（道具）{
超级（道具）；
此.state={
标题：this.props.headers，
数据：this.props.data，
页码：1，
pageSize:PAGINATION_PAGE_SIZE_默认值
};
}
组件将接收道具（下一步）{
const{data，headers}=nextProps；
this.setState（{data:data.slice（0，this.state.pageSize），headers}）；
}
onPaginationChange=e=>{
让pageNumber=e.page；
让pageSize=e.pageSize；
让开始=（页码-1）*页面大小；
让end=pageNumber*pageSize；
这是我的国家({
数据：this.props.data.slice（开始，结束），
页码：页码，
页面大小
});
}
render（）{
const{data，headers}=this.state；
log（{STATE_DATA:DATA}）；
返回(
(...)} >...
)
}
}
这是我正在使用的组件：

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

在render方法中，我有这个
console.log（{STATE\u DATA:DATA}）
每次我更改页面时，它都会显示项目的数量，但是如果我来回执行我提到的操作，表中的项目会越来越多

我会错过什么

这是我正在使用的datatable组件->

和分页->

像这样更改代码，不要直接更改数据，否则将丢失分页的所有其他数据，请单独保留
表格数据


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}
        />
     <>

    )
  }

}



const PAGINATION_PAGE_SIZE_DEFAULT=10；
类可扩展组件{
建造师（道具）{
超级（道具）；
此.state={
标题：this.props.headers，
数据：this.props.data，
tableData:this.props.data.slice（0，分页\页面大小\默认值），
页码：1，
pageSize:PAGINATION_PAGE_SIZE_默认值
};
}
组件将接收道具（下一步）{
const{data，headers}=nextProps；
this.setState（{tableData:data.slice（0，this.state.pageSize），data，headers}）；
}
onPaginationChange=e=>{
让pageNumber=e.page；
让pageSize=e.pageSize；
让开始=（页码-1）*页面大小；
让end=pageNumber*pageSize；
这是我的国家({
tableData:this.props.data.slice（开始、结束），
页码：页码，
页面大小
});
}
render（）{
const{tableData，headers}=this.state；
log（{STATE_DATA: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}
        />
     <>

    )
  }

}



const PAGINATION_PAGE_SIZE_DEFAULT=10；
类可扩展组件{
建造师（道具）{
超级（道具）；
此.state={
标题：this.props.headers，
数据：this.props.data，
tableData:this.props.data.slice（0，分页\页面大小\默认值），
页码：1，
pageSize:PAGINATION_PAGE_SIZE_默认值
};
}
组件将接收道具（下一步）{
const{data，headers}=nextProps；
this.setState（{tableData:data.slice（0，this.state.pageSize），data，headers}）；
}
onPaginationChange=e=>{
让pageNumber=e.page；
让pageSize=e.pageSize；
让开始=（页码-1）*页面大小；
让end=pageNumber*pageSize；
这是我的国家({
tableData:this.props.data.slice（开始、结束），
页码：页码，
页面大小
});
}
render（）{
const{tableData，headers}=this.state；
log（{STATE_DATA:tableData}）；
返回(
(...)} >...
)
}
}

每次我来回时，它都会不断加载另外两个项目。请检查每页更改中的
表格数据。这很奇怪，因为它变化很好。我可以看到
tableData
包含7项，但该表呈现9项。在我第一次进入第二页时，它只呈现了7个项目，但在我第二次进入第二页时，它呈现了9个项目。这不可能发生，请检查is
DataTable
Reference
tableData
？是的，我知道这不可能发生。这应该是组件的一个bug。每次我来回的时候，它都会继续加载另外两个项目。请检查每个页面更改中的
tableData
。是的。这很奇怪，因为它变化很好。我可以看到
tableData
包含7项，但该表呈现9项。在我第一次进入第二页时，它只呈现了7个项目，但在我第二次进入第二页时，它呈现了9个项目。这不可能发生，请检查is
DataTable
Reference
tableData
？是的，我知道这不可能发生。它应该是组件的一个bug。