REACT分页:如何在单击中加载第二页数据

Question

我正在为应用程序创建分页，我是Reactjs的初学者。我正在使用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之前触发第二个呼叫。

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

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