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

Posted 2023-03-10

【中文标题】ReactJs：加载更多分页类型（附加）

【英文标题】：ReactJs: Load More pagination type (append)

【发布时间】：2016-09-30 04:26:21

【问题描述】：

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

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

非常感谢。

【参考方案1】：

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

【参考方案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>
    );

【讨论】：

非常感谢@ctrlplusb！它几乎是固定的。剩下要做的就是如何将我的新结果附加到现有的状态变量中，因为返回的数据是一个对象，而不是一个数组，所以 concat() 将不起作用。

我当然可以帮你。你能在你的问题中复制一个示例结果吗

没关系，我找到了解决方案！基本上，我创建了一个临时变量来使用 .map() 将我的对象转换为数组，而 concat() 现在可以正常工作了。非常感谢@ctrlplusb 的帮助。结果更简单，也更干净。