反应：分页工作不顺利

Question

我正在 React 中进行分页。我正在通过 API 从在线服务器获取数据。 API 内置于 Loopback 中。我对 next 和 previous button 有一些问题。如果用户想要呈现下一页数据，我会为分页创建逻辑，它会点击下一页，如果用户想要加载上一页数据，它会点击上一个按钮。使用我的逻辑下一个按钮工作正常，如果用户单击下一个按钮，它会呈现下一页数据，但问题是如果用户想单击previous 按钮，它会加载下一页数据而不是上一页数据。如果用户单击下一步它必须加载下一页数据或用户想要加载上一页数据它必须使用 prev 按钮加载上一页，请有人帮助我如何进行这种类型的分页。

代码

        class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

Answer 1

如果您查看位于 https://react.semantic-ui.com/addons/pagination/ 的分页组件的文档，您会看到您将 this.btnClick 传递给 onClick={this.btnClick}，而它应该传递给 onPageChange={this.btnClick}

<Pagination
    boundaryRange={0}
    onPageChange={this.btnClick}
    defaultActivePage={1}
    ellipsisItem={null}
    firstItem={null}
    lastItem={null}
    siblingRange={1}
    totalPages={10}
/>

传入onPageChange的参数如下： onPageChange(event: SyntheticEvent, data: object)

目前尚不清楚状态中的 Item 和 Skip 之间的区别以及您尝试使用 btnClick 函数完成的任务。看起来您并没有考虑到您可以单击分页组件上的编号页面而不仅仅是 nextPage 和 PrevPage 按钮的可能性。

我将假设 Item 表示您想要进入的当前页面，在这种情况下，在您的 btnClick 函数中，您可以从 data 参数中获取下一个活动页面（这将返回分页数下一页 - 无论您是直接单击该数字还是单击 nextPage）。

btnClick(event, data){
    const nextPage = data.activePage;
    this.setState({item: nextPage});

}

Answer 2

您刚刚以添加 skip:skip+10 的一种方式编写 btnClick(e)，但如果您需要以前的数据，则应减去 skip:skip-10

所以解决办法是

btnClick(e,type){
const Item=this.state.Item;
const skip=this.state.skip;
If(type === “next”){
this.setState({
  Item,
  skip:skip-10
},()=> this.getData())
} else {
  this.setState({
  Item,
  skip:skip+10
 })
}

}

// 调用函数 this.btnClick(e, “next”) 或 prev for pervious