时间戳

首页 > 解决方案 > React Pagination：如何在点击时加载第二页数据

javascript - React Pagination：如何在点击时加载第二页数据

问题描述

我正在为我的应用程序创建分页，我是 reactJS 的初学者。我正在使用 API 来获取页面数据，但数据很长，我想显示它（10-10）。2我为它实现了逻辑，幸运的是，当我点击什么都没有发生时，它在第一页上显示了 10 个条目。我想10在第一页显示第一个条目，但是当用户点击2它必须10-20在第二页显示条目（意味着在第二次点击时它应该跳过前 10 个条目并在第二页中包括 10-20）。当用户单击下一步或时，它将保持相同的方式3. 这是可能的，因为 API 是内置在 loopback 中的，并且 loopback 提供了过滤功能。我在 API 链接中使用了过滤器，仅用于第一页中显示的前 10 个条目。有人可以帮我如何实现这个逻辑。谢谢

代码

        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' ))

标签： javascriptreactjsrestloopbackjssemantic-ui-react

解决方案

setState函数是异步的。这意味着您在将新 id 设置为 state 之前触发了对 api 的第二次调用。

尝试将回调函数传递给该setState方法：

this.setState({
  id
}, () => this.getData())

推荐阅读