反应分页：如何在点击时加载第二页数据

Question

I am creating pagination for my application, I am beginner to reactJS . I am using API for fetching page data but data is long long as list , I want to show it ( 10-10 ) . I Implemented Logic for it , fortunately it showing 10 entries on first page when I click on 2 Nothing happen . I want to show first 10 entries in first page but when user click on 2 It must show 10-20 entries in second page ( Mean that on second click it should skip first 10 entries and include 10-20 in second page ) . It will maintain same manner when user click on next or 3 . It possible because API is built in loopback and loopback give filtering functionality . I used filter in API link for just first 10 entries which are showing in first page . Could someone please help me how to implement this logic . Thanks

Code

        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 function is asynchronous. That means that you are triggering the second call to api before setting the new id in state.

Try by passing a callback function to the setState method:

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