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;

如果你不再复制原始数组，你可以使用设置长度5来改变数组，然后迭代。

Answer 2

你也可以使用 filter()

@function to-number($value) 
  @if type-of($value) == 'number' 
    @return $value
  @else if type-of($value) != 'string' 
    @error 'Value for `to-number` should be a number or a string.'
  

  $result: 0
  $digits: 0
  $minus: str-slice($value, 1, 1) == '-'
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9)

  @for $i from if($minus, 2, 1) through str-length($value) 
    $character: str-slice($value, $i, $i)

    @if (index(map-keys($numbers), $character) or $character == '.') 
      @if $character == '.' 
        $digits: 1 
      @else if $digits == 0 
        $result: $result * 10 + map-get($numbers, $character)  
      @else 
        $digits: $digits * 10
        $result: $result + map-get($numbers, $character) / $digits
      
  @return if($minus, -$result, $result)




@function decimal-round ($number, $digits: 0, $mode: round) 
  $n: 1

  @if type-of($number) != number
      @warn '#{ $number } is not a number.'
      @return $number
  
  // $digits must be a unitless number
  @if type-of($digits) != number 
    @warn '#{ $digits } is not a number.'
    @return $number
  @else if not unitless($digits) 
    @warn '#{ $digits } has a unit.'
    @return $number
  
  @if $digits > 0 
    @for $i from 1 through $digits 
        $n: $n * 10
      
  
  @if $mode == round
    @return round($number * $n) / $n
  @else if $mode == ceil 
    @return ceil($number * $n) / $n
  @else if $mode == floor 
    @return floor($number * $n) / $n
  @else
    @warn '#{ $mode } is undefined keyword.'
    @return $number
  



@function rgba-to-hex($rgba)
  $colorCode: ( '0','1', '2','3','4','5','6','7','8','9','A','B','C','D','E', 'F')
  
  // 255 / 100 = 2.55
  // 10 / 16 = 0.625

  $alpha: alpha($rgba)

  // ============================================= RED ================================
  $redStr: ''+(red($rgba) / 16)

  $index: str-index($redStr, ".")
  // add decimal number incase it does not have and update index
  @if $index == null  
    $redStr: $redStr+'.0' 
    $index: str-index($redStr, ".")



  $redInteger :  to-number(str-slice($redStr, 0, $index - 1))
  $redDecimal: decimal-round(to-number(str-slice($redStr, $index + 1,  $index + 1)) / 0.625)


  // ============================================= GREEN ============================
  $greenStr: ''+(green($rgba) / 16)


  $index: str-index($greenStr, ".")
  // add decimal number incase it does not have and
  @if $index == null 
    $greenStr: $greenStr+'.0' 
    $index: str-index($greenStr, ".")

  $greenInteger :  to-number(str-slice($greenStr, 0, $index - 1))
  $greenDecimal: decimal-round(to-number(str-slice($greenStr, $index + 1,  $index + 1)) / 0.625)



  // ============================================= BLUE ============================  
  $blueStr: ''+(blue($rgba) / 16)

  $index: str-index($blueStr, ".")
  @if $index == null  
    $blueStr: $blueStr+'.0' 
    $index: str-index($blueStr, ".")

  $blueInteger :  to-number(str-slice($blueStr, 0, $index - 1))
  $blueDecimal: decimal-round(to-number(str-slice($blueStr, $index + 1,  $index + 1)) / 0.625) 



  // ============================================= ALPHA ============================  
  $alphaStr: ''+ decimal-round((($alpha*100)*2.55) /16) 

  $index: str-index($alphaStr, ".")
  
  @if $index == null 
    $alphaStr: $alphaStr+'.0' 
    $index: str-index($alphaStr, ".")
 

  $alphaInteger :  ''+to-number(str-slice($alphaStr, 0, $index - 1))

  $index: str-index($alphaInteger, ".")
  @if $index == null  
    $alphaInteger: $alphaInteger+'.0' 
    $index: str-index($alphaInteger, ".")

  $alphaInteger :  to-number(str-slice($alphaStr, 0, $index - 1))

  $alphaDecimal: to-number(str-slice(''+to-number(str-slice($alphaStr, $index + 1, str-length($alphaStr))) / 0.625, 0, 2)) 

  @return unquote("#"+nth($colorCode, $redInteger + 1)+nth($colorCode, $redDecimal + 1)+nth($colorCode, $greenInteger + 1)+nth($colorCode, $greenDecimal + 1) +nth($colorCode, $blueInteger + 1)+nth($colorCode, $blueDecimal + 1)+nth($colorCode, $alphaInteger + 1)+nth($colorCode, $alphaDecimal + 1))



  $result : rgba-to-hex( rgba(192, 84, 84, 0.582))
  @debug 'peter =='+$result

Answer 3

嗨，如果您使用的是功能组件。你可以试试这个：

<p>const [film, setFilm] = useState([])</p>

<i>// Fetch data from API</i>

<p>useEffect(() =>{...})</p>

var fiveFilm = film.slice(0,5)

在您的返回函数中：

您可以使用以下方法进行映射：

{fiveFilm.map(item => <p>{item.name}<p>)}

Answer 4

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

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

return film;

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

参考：

限制.map循环中的项目

4 个答案: