javascript - ReactJs: Load More pagination type (append) - Stack Overflow

admin管理员组

文章数量:1391964

I'm new to ReactJS and one thing that I'm working on is Pagination. ReactJS is a great tool to make plex UI views but sometimes the simplest thing is the hardest. I could do it in jQuery but I want to do it using React.

Basically, I would like to have a "Load More" style of pagination where items are appended to the body (like a news feed). In my code, I do an ajax request to get the data, put it in a state variable, and then render the DOM. I have successfully done this with only 1 page of data because I created a new variable for items.

onCallSuccessGetListings: function(data) {
    this.setState({ hasSuccess: data.success });

    if(data.success !== false) {
        this.setState({ 
            hasSuccess: JSON.parse(data).success,
            newListings: false
        });

        if(this.props.hasClickedPagination) {
            this.setState({
                newListings: JSON.parse(data).result
            });
        } else {
            this.setState({
                listings: JSON.parse(data).result
            });
        }
    }
},

Basically, I know when the person clicked on "Load More" and then I use a new variable to store the data. Here's the render function:

render: function() {
    var markup = [],
        nextMarkup = [];

    if(this.state.hasSuccess) {
        markup = Object.keys(this.state.listings).map(function(value){
            return (
                <div className="property__item" key={value}>
                    blablabla
                </div>
            )
        }, this)

        if(this.state.newListings !== false) {
            nextMarkup = Object.keys(this.state.newListings).map(function(value){
                return (
                    <div className="property__item" key={value}>
                        blablabla
                    </div>
                )
            }, this)
        }
    } else {
        markup.push(<p key="1">No results</p>)
    }

    return (
        <div className="property__list--grid">
            { markup }
            { nextMarkup }
        </div>
    );
}

As you can see, I'm duplicating the code and I couldn't find a way to do it the "React" style. I don't want to create 10 variables when the user clicks on "Load More" 10 more times.

If anyone could help, that would be great. I can't think of a solution and it has been haunting me for days.

Many thanks.

I'm new to ReactJS and one thing that I'm working on is Pagination. ReactJS is a great tool to make plex UI views but sometimes the simplest thing is the hardest. I could do it in jQuery but I want to do it using React.

Basically, I would like to have a "Load More" style of pagination where items are appended to the body (like a news feed). In my code, I do an ajax request to get the data, put it in a state variable, and then render the DOM. I have successfully done this with only 1 page of data because I created a new variable for items.

onCallSuccessGetListings: function(data) {
    this.setState({ hasSuccess: data.success });

    if(data.success !== false) {
        this.setState({ 
            hasSuccess: JSON.parse(data).success,
            newListings: false
        });

        if(this.props.hasClickedPagination) {
            this.setState({
                newListings: JSON.parse(data).result
            });
        } else {
            this.setState({
                listings: JSON.parse(data).result
            });
        }
    }
},

Basically, I know when the person clicked on "Load More" and then I use a new variable to store the data. Here's the render function:

render: function() {
    var markup = [],
        nextMarkup = [];

    if(this.state.hasSuccess) {
        markup = Object.keys(this.state.listings).map(function(value){
            return (
                <div className="property__item" key={value}>
                    blablabla
                </div>
            )
        }, this)

        if(this.state.newListings !== false) {
            nextMarkup = Object.keys(this.state.newListings).map(function(value){
                return (
                    <div className="property__item" key={value}>
                        blablabla
                    </div>
                )
            }, this)
        }
    } else {
        markup.push(<p key="1">No results</p>)
    }

    return (
        <div className="property__list--grid">
            { markup }
            { nextMarkup }
        </div>
    );
}

As you can see, I'm duplicating the code and I couldn't find a way to do it the "React" style. I don't want to create 10 variables when the user clicks on "Load More" 10 more times.

If anyone could help, that would be great. I can't think of a solution and it has been haunting me for days.

Many thanks.

• javascript
• ajax
• reactjs
• pagination

Share Improve this question Follow edited Jun 1, 2016 at 8:19 ctrlplusb 13.2k77 gold badges5656 silver badges5757 bronze badges asked Jun 1, 2016 at 1:00 thomasthomas 3311 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

This tutorial might help everyone to implement a paginated list in React. It has the list itself and a More button to fetch the next subset of a paginated list from a backend. The backend in tutorial is already provided. I hope it helps anyone who wants to implement such a functionality.

There is no need to create a new state variable per "page of results". It looks to me that you are doing an infinite scroll result set and that the onCallSuccessGetListings lives within your Component.

Instead of creating a new variable for a new page of results, append any new results to the existing variable. e.g.

onCallSuccessGetListings: function(data) {
    var jsonData = JSON.parse(data);

    this.setState({ 
      hasSuccess: jsonData.success,
      listings: jsonData.success 
         ? this.state.listings.concat(jsonData.result)
         : this.state.listings
    });
},

Make sure you set your initial state to be { listings = [] } (https://facebook.github.io/react/docs/ponent-specs.html#getinitialstate).

The above code will trigger an update on your ponent every time the state is set, then you can simply loop over the results. I would also consider updating the way you use the state.hasSuccess flag. I think it should rather be used to indicate if an error occurred. Here is a revised render() method:

render: function() {
    var markup = [];
        hasSuccess = this.state.hasSuccess,
        listings = this.state.listings;

    if(!hasSuccess) {
        markup.push(<div>An error occurred.</div>);
    } else if (listings.length > 0) {
        markup = Object.keys(listings).map(function(value){
            return (
                <div className="property__item" key={value}>
                    blablabla
                </div>
            )
        }, this)
    } else {
        markup.push(<p key="1">No results</p>)
    }

    return (
        <div className="property__list--grid">
            { markup }
        </div>
    );
}

本文标签： javascriptReactJs Load More pagination type (append)Stack Overflow