循环数组中的数字 - react

Question

我有一个数组

let counterArray = [5];

我需要循环5次

{counterArray .map(counter=>
    <span>Counter- {counter}</span>
)}

这只会显示计数器。我如何循环柜台？

假设我有

let counterArray = [15];

。映射必须循环15次。基本上将数字转换为循环。如何实现这一目标？

Answer 1

只是建立给定长度的数组，然后循环：

   Array.from({ length: counterArray[0] }, (_, i) => i)
    .map(counter => <Counter {counter} />)

另外，可能只使用一个好的旧循环：

  const res = [];
  for(let counter = 0; counter < counterArray[0]; counter++)
    res.push(<Counter {counter} />);
  return res;

Answer 2

let counterArray = [5];

将仅创建一个具有值5

的单个项目数组

在此处使用Array构造函数

let counterArray = [...new Array(5)].map( (s, i) => i );

这将创建一个数组，值为计数器值-[0, 1, 2, 3, 4]

Answer 3

我始终使用 lodash

的 range

import { range } from 'lodash'
<div>
  {
    range(5).map((item, index) => (
      <div key={index}>{index}</div>
    ))
  }
</div>