React Pagination：如何在Click上加载第二页数据

Question

我正在为我的应用程序创建分页，我是初学者反应.JS。我正在使用API​​来获取页面数据，但数据长的列表，我想显示它（10-10）。我为它实现了逻辑，幸运的是，当我点击2时，它在第一页上显示了10个条目。我想在第一页显示第一个10条目，但是当用户点击2它必须在第二页显示10-20条目（意味着在第二次点击它应该跳过前10个条目并在第二页包括10-20）。当用户点击下一个或3时，它将保持相同的方式。这可能是因为API内置环回并且环回提供了过滤功能。我在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' ))

Answer 1

setState函数是异步的。这意味着在将新ID设置为状态之前，您正在触发对api的第二次调用。

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

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