限制.map循环中的项目

Question

我想问一下如何将我的.map循环限制为仅5项,因为目前当我访问api时它会返回20个项目.但是我只想显示5.我发现大部分时间只是在整个对象数组中循环而不是将其限制为多个项目.

注意:我无法控制API,因为我只使用moviedb api

这是我的代码:

var film = this.props.data.map((item) => {
  return <FilmItem key={item.id} film={item} />
});

return film;

Answer 1

您可以使用Array#slice并仅使用您需要的元素.

var film = this.props.data.slice(0, 5).map((item) => {
        return <FilmItem key={item.id} film={item} />
    });

return film;

如果你不再复制原始数组,你可以使用seting length来改变数组,5然后迭代.

Answer 2

你也可以使用filter()

var film = this.props.data.filter((item, idx) => idx < 5).map(item => {
   return <FilmItem key={item.id} film={item} />
});

return film;

Answer 3

您还可以通过将第二个参数传递给map()回调来限制它，该参数是循环中项目的索引。

const film = this.props.data?.map(
  (item, index) => 
    index < 5 && ( // <= only 5 items
      <FilmItem 
        key={item.id} 
        film={item} 
      />
    )
);

return film;

但是，您可能应该坚持 Nina 的答案，除非您确实需要代码中的一些优雅。因为我猜测我的答案在性能方面会较慢。

参考：

1. MDN：map() 语法
2. 可选链接