问题描述:

Right now I'm stuck with pagination implementation with React. I have all the neccessary data from JSON, however I got no result.

Here's the code I use:

first, I fetch data from the server:

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

});

});

}

Thus I get a simple JSON file:

{

"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,

...

},

...

]

}

}

I successfully display items data in render method like this:

let items = _.map(this.state.items, (item) => {

return (

<div key={item.id}>

<div className="content">

<span>

{item.type}

</span>

...

</div>

</div>

)

});

and then return it like so:

return (

<div>

{items}

</div>

<div>

<a href={this.state.nextPage}>Next</a>

</div>

)

I can see that URL changes after I press Next button to page2 but there are two issues: I want to change items components based on JSON file when I click Next (i.e first page contains the first set of 16 elements, second page contains the second set) but there is no change and when I click Next button again but on the second page (according to URL) it doesn't get me to the third page and so on.

I know I need to somehow bind these state to page2 URL shows content described on the second page and I ran through tutorials but they seem to be outdated in case I use React 15.2.1.

I would appreciate any help or a thought that'd help me to solve it!

网友答案:

Add a click handler to your link element and pass the url as parameter. In the handler function make the ajax request and update the states using setState (similar to the one u did it on 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>
)
  }
相关阅读:
Top