javascript - ReactJs:加载更多分页类型(追加)

我是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个变量。

如果有人可以帮助，那就太好了。我想不出解决方案，它困扰了我好几天。

非常感谢。

最佳答案

无需在“结果页面”中创建新的状态变量。在我看来，您正在做一个无限滚动结果集，并且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>
    );
}