Реагируйте: разбиение на страницы не работает должным образом - PullRequest
Новая
       21

Реагируйте: разбиение на страницы не работает должным образом

2 голосов
/ 13 марта 2019

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

Код 

<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()}
Изменить ссылку )}} ReactDOM.render (, document.querySelector ('div # my-example'))

1 Ответ

0 голосов
/ 15 марта 2019

Каждый раз, когда вы нажимаете любую кнопку, 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>
  )
}
...