React中如何循环遍历列表n次，超出范围后从头开始？

你的问题核心是当n超过NOTES数组长度时，索引越界导致报错。解决这个问题最直接的方法是用取余运算符%，它能让索引自动在数组长度范围内循环，不会超出边界。

核心思路 #

取余运算index % NOTES.length会返回index除以数组长度后的余数：

• 当index小于数组长度时，余数就是index本身，正常取对应元素
• 当index等于或超过数组长度时，余数会回到0，重新从数组开头取元素
  比如12 % 12 = 0（回到第一个元素C），13 % 12 = 1（取第二个元素C#），完全符合你要的循环效果。

完整实现代码 #

下面是包含用户输入功能的完整示例，你可以直接用：

import { useState } from 'react';

const NOTES = [
  { id: 0, val: "C" },
  { id: 1, val: "C#" },
  { id: 2, val: "D" },
  { id: 3, val: "D#" },
  { id: 4, val: "E" },
  { id: 5, val: "F" },
  { id: 6, val: "F#" },
  { id: 7, val: "G" },
  { id: 8, val: "G#" },
  { id: 9, val: "A" },
  { id: 10, val: "A#" },
  { id: 11, val: "B" },
];

function NoteList() {
  // 用状态管理用户输入的数量n，默认设为14做演示
  const [n, setN] = useState(14);

  return (
    <div>
      {/* 用户输入框，限制输入正整数 */}
      <input
        type="number"
        value={n}
        onChange={(e) => setN(Number(e.target.value))}
        min="1"
        placeholder="输入要显示的音符数量"
      />
      <div style={{ marginTop: '10px', display: 'flex', gap: '8px' }}>
        {[...Array(n).keys()].map((index) => {
          // 计算循环后的音符索引
          const noteIndex = index % NOTES.length;
          const currentNote = NOTES[noteIndex];
          // 注意：key必须唯一，因为同一个音符会重复出现，所以要加上循环次数区分
          const uniqueKey = `${currentNote.id}-${Math.floor(index / NOTES.length)}`;
          return <div key={uniqueKey}>{currentNote.val}</div>;
        })}
      </div>
    </div>
  );
}

export default NoteList;

关键细节说明 #

1. 取余运算的使用：这是实现循环的核心，确保永远不会访问到数组不存在的索引，彻底解决报错问题。
2. 唯一key的设置：因为同一个音符会多次渲染，不能直接用currentNote.id作为key（React会认为是同一个元素，引发渲染警告），所以通过Math.floor(index / NOTES.length)获取循环次数，和音符id拼接成唯一key。
3. 用户输入处理：用useState管理输入的n，并通过onChange事件实时更新，同时设置min="1"避免输入非正整数。

简化版（固定n值） #

如果不需要用户输入，直接用固定的n（比如14），代码可以简化成这样：

const NOTES = [/* 你的音符数组 */];
const n = 14;

return (
  <div style={{ display: 'flex', gap: '8px' }}>
    {[...Array(n).keys()].map((index) => {
      const noteIndex = index % NOTES.length;
      const uniqueKey = `${NOTES[noteIndex].id}-${Math.floor(index / NOTES.length)}`;
      return <div key={uniqueKey}>{NOTES[noteIndex].val}</div>;
    })}
  </div>
);

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