是否可以仅映射数组的一部分? (Array.map()) [英] Is it possible to map only a portion of an array? (Array.map())

问题描述

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

I am building a project using React.js as a front-end framework. On one particular page I am displaying a full data set to the user. I have an Array which contains this full data set. It is an array of JSON objects. In terms of presenting this data to the user, I currently have it displaying the whole data set by returning each item of data using Array.map().

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

This is a step in the right direction, but now I need to display only a portion of the data-set, not the whole thing, I also want some control in terms of knowing how much of the total data set has been displayed, and how much of the data set is yet to be displayed. Basically I am building something like a "view more" button that loads more items of data to the user.

这是我现在使用的内容，其中"feed"表示我的JSON对象数组. (这将显示整个数据集.)

Here is what I am using now where 'feed' represents my Array of JSON objects. (this displays the whole data set.)

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

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

I am wondering if it is possible to use .map() on only a portion of the array without having to break up the array before hand? I know that a possible solution would be to hold the full data set, and break it off into portions, and then .map() those portions, but is there a way to .map() a portion of the array without having to break it up?

任何和所有的反馈意见表示赞赏.谢谢！

Any and all feedback is appreciated. Thanks!

推荐答案

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

Do not try to solve this problem with a hack in your mapping step.

相反，将列表 slice()正确的长度优先在映射之前:

Instead, slice() the list to the right length first before the mapping:

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>

这篇关于是否可以仅映射数组的一部分? (Array.map())的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！