使用 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,
        ...
      },
      ...
    ]
 }
}

我在render 方法中成功显示items 数据，如下所示：

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>
)

我可以看到在我按下Next 按钮到page2 后URL 发生了变化，但是有两个问题：当我单击Next 时，我想根据JSON 文件更改items 组件（即第一页包含第一组 16 个元素，第二页包含第二组）但没有变化，当我再次单击 Next 按钮但在第二页上（根据 URL）它没有让我进入第三页等等. 我知道我需要以某种方式将这些状态绑定到page2 URL 显示第二页上描述的内容，我浏览了教程，但如果我使用React 15.2.1，它们似乎已经过时了。 我将不胜感激任何可以帮助我解决问题的帮助或想法！

Answer 1

将点击处理程序添加到您的链接元素并将 url 作为参数传递。在处理函数中发出 ajax 请求并使用 setState 更新状态（类似于你在 componentDidMount 上所做的）。

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>
)
  }