限制 .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;

原文由 Sydney Loteria 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 Array#slice 并只获取您需要的元素。

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

return film;

如果您不再需要原始数组，可以通过将长度设置为 5 来改变数组并迭代它们。

原文由 Nina Scholz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你也可以使用 filter()

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

return film;

原文由 hozefam 发布，翻译遵循 CC BY-SA 4.0 许可协议