ReactJs：加载更多分页类型（附加）

Question

我是 ReactJS 的新手，我正在做的一件事是分页。 ReactJS 是制作复杂 UI 视图的好工具，但有时最简单的东西却是最难的。我可以用 jQuery 来做，但我想用 React 来做。

基本上，我希望有一种“加载更多”的分页样式，其中项目附加到正文（如新闻提要）。在我的代码中，我执行 ajax 请求来获取数据，将其放入状态变量中，然后渲染 DOM。我只用一页数据就成功完成了这项工作，因为我为项目创建了一个新变量。

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

基本上，我知道该人何时单击“加载更多”，然后我使用一个新变量来存储数据。这是渲染函数：

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

如您所见，我正在复制代码，但找不到“React”风格的方法。当用户再点击“加载更多”10 次时，我不想创建 10 个变量。

如果有人可以提供帮助，那就太好了。我想不出解决办法，而且这几天一直困扰着我。

非常感谢。

Answer 1

This tutorial 可能会帮助每个人在 React 中实现分页列表。它具有列表本身和更多按钮，用于从后端获取分页列表的下一个子集。教程中的后端已经提供。我希望它可以帮助任何想要实现此类功能的人。

Answer 2

无需为每个“结果页”创建新的状态变量。在我看来，您正在执行无限滚动结果集，并且 onCallSuccessGetListings 存在于您的组件中。

不要为新的结果页面创建新变量，而是将任何新结果附加到现有变量。例如

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

确保将初始状态设置为 { listings = [] } (https://facebook.github.io/react/docs/component-specs.html#getinitialstate)。

上面的代码会在每次设置状态时触发组件的更新，然后你可以简单地循环结果。我还会考虑更新您使用 state.hasSuccess 标志的方式。我认为它应该用于指示是否发生错误。这是一个修改后的 render() 方法：

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