是否可以只映射数组的一部分？(Array.map())

IT技术 javascript arrays json reactjs
2021-05-23 02:26:04

我正在使用 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() 一部分数组而不必中断起来了吗？

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

4个回答

不要尝试在映射步骤中使用 hack 来解决此问题。

相反，在映射之前先将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>

您可以在映射数组之前使用slice函数，看起来您想在那里进行一些分页。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

Array.reduce 应该做你所要求的。只需根据您想要的范围更改 if 语句。

var excludeAfterIndex = 5;

feed.reduce((mappedArray, item, index) => {
  if (index > excludeAfterIndex) { // Whatever range condition you want
    mappedArray.push(<FeedItem key={index} data={item}/>);
  }

  return mappedArray;
}, []);

我脑子里最简单的方法就是使用过滤器和地图

const feed = [1,2,3,4,5,6,7,8,9,10,11]
feed.filter((item, index) => index < 5).map((filteredItem) => //do somthing with filtred item here//)

其中 5 只是您想要获得的一些物品

其它你可能感兴趣的问题
上一篇在本地浏览器中运行简单的 react js 下一篇3D 金属打印