Pagination with React.js

Question

Прямо сейчас я застрял с реализацией страницы с помощью React. У меня есть все необходимые данные от JSON, но я не получил никакого результата. Вот код, я использую: первых, я выборки данных с сервера:

constructor() { 
    super(); 
    this.state = {items: {}, totalPages: [], nextPage: []}; 
} 
componentDidMount() { 
    let url = 'http://localhost:8000/items?json=true'; 
    request.get(url).then((response) => { 
     this.setState({ 
      items: response.body.items.data, 
      totalPages: response.body.items.last_page, 
      nextPage: response.body.items.next_page_url 
     }); 
    }); 
} 

Таким образом, я получаю простой JSON файл:

{ 
    "items": { 
    "total": 26025, 
    "per_page": 16, 
    "current_page": 1, 
    "last_page": 1627, 
    "next_page_url": "http://localhost:8000/items?page=2", 
    "prev_page_url": null, 
    "from": 1, 
    "to": 16, 
    "data": [ 
     { 
     "id": 1, 
     ... 
     }, 
     { 
     "id": 2, 
     ... 
     }, 
     ... 
    ] 
} 
} 

Я успешно отображать items данные в render методе, как это:

let items = _.map(this.state.items, (item) => { 
     return (
       <div key={item.id}> 
         <div className="content"> 
          <span> 
           {item.type} 
          </span> 
          ... 
         </div> 
       </div> 
     ) 
    }); 

return, а затем это так:

return (
     <div> 
      {items} 
     </div> 
     <div> 
      <a href={this.state.nextPage}>Next</a> 
     </div> 
) 

Я могу видеть, что изменения URL после того, как я нажимаю Next кнопку page2, но есть две проблемы: Я хочу изменить items компоненты на основе JSON файла, когда я нажимаю Next (т.е. первая страница содержит первый набор из 16 элементов , вторая страница содержит второй набор), но никаких изменений нет, и когда я снова нажимаю кнопку Next, но на второй странице (по URL) он не попадает на третью страницу и так далее. Я знаю, что мне нужно каким-то образом связать это состояние с page2. URL-адрес показывает содержимое, описанное на второй странице, и я просмотрел учебники, но они, похоже, устарели, если я использую React 15.2.1. Буду признателен за любую помощь или мысль, которая поможет мне решить ее!

Answer 1

Добавить обработчик кликов в элемент ссылки и передать URL-адрес в качестве параметра. В функции обработчика сделайте запрос ajax и обновите состояния, используя setState (аналогично тому, как это сделал u на компонентеDidMount).

constructor() { 
    super(); 
    this.state = { 
     items: [], 
     totalPages: '', 
     nextPage: '' 
    }; 
    this._loadData = this._loadData.bind(this); 
    } 
    componentDidMount() { 
    const url = 'http://localhost:8000/items?json=true'; 
    this._loadData(url); 

    } 
    _loadData(url) { 
    request.get(url).then((response) => { 
     this.setState({ 
     items: response.body.items.data, 
     totalPages: response.body.items.last_page, 
     nextPage: response.body.items.next_page_url 
     }); 
    }); 
    } 
    render() { 
    let items = _.map(this.state.items, (item) => { 
    return (
      <div key={item.id}> 
        <div className="content"> 
         <span> 
          {item.type} 
         </span> 
         ... 
        </div> 
      </div> 
    ) 
}); 
    return (
     <div> 
      {items} 
     </div> 
     <div> 
      <a href="#0" onClick={this._loadData(this.state.nextPage)}>Next</a> 
     </div> 
) 
    }