React实现将数组内数字转为对应次数循环的方法

这问题我之前在项目里也碰到过，核心思路就是把数组里的单个数字转换成对应长度的数组，再用map来遍历渲染就行～

具体步骤： #

1. 先从你的数组里取出需要循环的次数（因为你的数组只有一个元素，直接取索引0就行）；
2. 用Array(循环次数).fill()生成一个对应长度的数组——这里必须用fill()，因为直接Array(n)创建的是包含n个空槽的数组，map会跳过这些空槽，无法触发遍历；
3. 遍历这个新数组时，利用map的第二个参数（索引）来生成你需要的计数内容。

完整代码示例（React环境）： #

// 你的原始数组，比如[15]
let counterArray = [15];

// 取出要循环的次数
const loopTimes = counterArray[0];

// 生成对应长度的数组并渲染
function CounterComponent() {
  return (
    <div>
      {Array(loopTimes).fill().map((_, index) => (
        <span key={index} style={{ marginRight: '8px' }}>
          Counter- {index + 1}
        </span>
      ))}
    </div>
  );
}

额外说明： #

• 为什么用_作为map的第一个参数？因为我们不需要用到数组里的元素值，用_是约定俗成的占位符，表示这个参数不会被使用；
• key={index}在这里是安全的：因为你的列表是静态生成的，没有排序、增删元素的操作，符合React对key的要求；
• 如果你的数组里有多个数字（比如[3,5]），可以用flatMap来批量处理：

  {counterArray.flatMap(num => Array(num).fill()).map((_, idx) => (
    <span key={idx}>Counter- {idx + 1}</span>
  ))}
  

内容的提问来源于stack exchange，提问作者Matarishvan