Реактив-пагинат в моем уже созданном приложении реакции, стилизация данных не работает - PullRequest
Новая
       30

Реактив-пагинат в моем уже созданном приложении реакции, стилизация данных не работает

0 голосов
/ 03 сентября 2018

Мой реагирующий пагинат не работает. Я показываю все свои данные независимо от того, сколько я положил в значение ключа данных предела. Я проверил, и все смещение, данные и количество страниц отображаются правильно. Мне просто нужно показывать по 10 человек за раз вместо того, чтобы показывать все 82. Может кто-нибудь объяснить, почему поступают все мои данные, хотя мой лимит говорит 10. НЕКОТОРЫЕ ПОМОГАЮТ 

class App extends Component {

  componentDidMount(){
    this.loadCardsFromServer();
  }

  loadCardsFromServer(){
    $.ajax({
      url      : `http://localhost:3008/people`,
      data     : {limit: 10, offset: this.state.offset},
      dataType : 'json',
      type     : 'GET',

      success: data => {
        console.log('it woooorked', data)
        this.setState({data: data, pageCount: 10});
      },

      error: (xhr, status, err) => {
        console.error(this.props.url, status, err.toString());
      }
    });
  }

  handlePageClick = (data) => {
    let selected = data.selected;
    let offset = Math.ceil(selected * this.props.perPage);
    console.log('data', offset)

    this.setState({offset: offset}, () => {
      this.loadCardsFromServer();
    });
  };

render() {
    const filteredData = !!this.state.data ? this.state.data.filter(card =>{
    return (
    card.name.toUpperCase().includes(this.state.input.toUpperCase())
    }) : null;
    return (
      <div className='content'>
          {!!this.state.data ? this.state.data.map(i => <Card person={i} key={i.created}/>) : null}
          <ReactPaginate
              previousLabel={"previous"}
              nextLabel={"next"}
              breakLabel={<a href="">...</a>}
              breakClassName={"break-me"}
              pageCount={this.state.pageCount}
              marginPagesDisplayed={2}
              pageRangeDisplayed={5}
              onPageChange={this.handlePageClick}
              containerClassName={"pagination"}
              subContainerClassName={"pages pagination"}
              activeClassName={"active"} 
          />
      </div>
...