Блог

Я новичок в ReactJS и работаю над разбиением на страницы. Я создаю логику для разбивки на страницы, она отлично работает с помощью кнопки next. Я извлекаю данные сервера через API, а API встроен в loopback. Что я хочу в разбивке на страницы, если пользователь находится на странице, 2 он покажет данные страницы 2, если пользователь захочет перейти к следующему или нажать на 3 в разбивке на страницы, он переместится на страницу 3 и загрузит данные страницы 3. По моей логике это работает нормально, делая то же самое, что я упоминал ранее, но когда пользователь нажимает на предыдущую кнопку или с кнопки 3 на кнопку 2, он не загружает данные предыдущей страницы. Когда пользователь нажимает на предыдущую кнопку, загружаются данные следующей страницы. Я хочу, чтобы, когда пользователь нажимал на кнопку 2, он загружал данные страницы 2, а не данные следующей страницы.

Код

      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)}amp;amp;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' ))
  

Всякий раз, когда вы нажимаете любую кнопку, this.state.skip всегда добавляет 10. Поэтому, когда вы со страницы 3 нажимаете кнопку 2, загружаются данные страницы 4.

Если вы хотите получить правильные данные. Вам следует отредактировать функцию btnClick следующим образом.

 btnClick(page) {
   const userId=this.state.userId;
   const skip=this.state.skip;
   this.setState({
       userId,
       skip:(page - 1) * 10
   },()=> this.getData())
}



 const UserIdComponent=props=>{
  return(
    <button
        onClick={() => props.onClick(props.name)}
        value={props.name}>
        {props.name}
    </button>
  )
}