循环数组内的数字 - React

Question

我有一个数组

let counterArray = [5];

我需要循环5次

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

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

假设我有

let counterArray = [15];

.map必须循环15次。基本上将数字转换为循环。怎么做到这一点？

Answer 1

只需构建一个给定长度的数组并循环遍历：

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

或者可以使用一个好的旧for循环：

  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

我始终使用range

中的lodash

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