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

我按Next按钮到page2后可以看到网址发生了变化，但有两个问题：我想点击{{1}时基于JSON文件更改items组件（即第一页包含第一组16个元素，第二页包含第二组）但没有变化，当我再次单击Next按钮但在第二页（根据URL）时它没有＆＃ 39; t让我到第三页，依此类推。我知道我需要以某种方式将这些状态绑定到Next URL显示第二页上描述的内容，然后我浏览了教程，但是如果我使用page2，它们似乎已经过时了。我很感激任何帮助或想法帮助我解决它！

Answer 1

向链接元素添加单击处理程序并将url作为参数传递。在handler函数中，使用setState创建ajax请求并更新状态（类似于你在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>
)
  }

用React.js分页

1 个答案: