Question

我正在React中进行分页。我正在通过API从在线服务器中获取数据。 API是在Loopback中构建的。我对next和previous按钮有一些疑问。如果用户要呈现下一页数据，它将单击下一步；如果用户要加载上一页数据，则单击上一个按钮，我将进行分页。按照我的逻辑，下一个按钮可以正常工作，如果用户单击下一个按钮，它将呈现下一个页面数据，但是问题是，如果用户要单击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

您刚刚以添加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”）或以前的

Answer 2

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

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

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

尚不清楚“状态”和“跳过”之间的区别以及您要使用btnClick函数要完成的操作。您似乎无法考虑单击分页组件上带编号的页面，而不仅仅是nextPage和PrevPage`按钮的可能性。

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

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

}

反应：分页无法顺利进行

2 个答案: