是否可以仅映射数组的一部分？（Array.map（））

Question

我正在使用React.js作为前端框架来构建一个项目。在一个特定页面上，我正在向用户显示完整的数据集。我有一个包含完整数据集的数组。它是JSON对象的数组。在向用户呈现此数据方面，我目前通过使用Array.map（）返回每一项数据来显示整个数据集。

这是朝着正确方向迈出的一步，但是现在我只需要显示数据集的一部分，而不是全部，我还需要一些控件来了解已显示的总数据集的数量，并且有多少数据集尚未显示。基本上，我正在构建类似“查看更多”按钮的东西，该按钮将更多数据项加载到用户。

这就是我现在使用的内容，其中“ feed”表示我的JSON对象数组。（这将显示整个数据集。）

 return (
  <div className={feedClass}>
  {
    feed.map((item, index) => {
      return <FeedItem key={index} data={item}/>
    })
  }
  </div>
);

我想知道是否有可能仅在数组的一部分上使用.map（）而不必事先拆分数组？我知道一个可能的解决方案是保存完整的数据集，然后将其拆分为多个部分，然后对这些部分进行.map（），但是有一种方法可以对数组的一部分进行.map（）而不必中断起来吗？

任何和所有反馈表示赞赏。谢谢！

Answer 1

在映射步骤中，请勿尝试通过破解来解决此问题。

而是，在映射之前slice()首先将列表的长度正确设置为：

class Feed extends React.Component {

  constructor(props) {

    super(props)



    this.handleShowMore = this.handleShowMore.bind(this)



    this.state = {

      items: ['Item A', 'Item B', 'Item C', 'Item D'],

      showItems: 2

    }

  }



  handleShowMore() {

    this.setState({

      showItems:

        this.state.showItems >= this.state.items.length ?

          this.state.showItems : this.state.showItems + 1

    })

  }



  render() {

    const items = this.state.items.slice(0, this.state.showItems).map(

      (item) => <div>{item}</div>

    )



    return (

      <div>

        {items}

        <button onClick={this.handleShowMore}>

          Show more!

        </button>

      </div>

    )

  }

}



ReactDOM.render(

  <Feed />,

  document.getElementById('root')

)


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>



<div id='root'></div>