而不是使用keys.map
您可以创建一个函数
此函数将接收一个参数（在本例中，您需要注解的次数为14）
然后在func中声明NOTES数组
在0中设置计数器（let变量）
设置一个空数组，您将在该数组之后填充info
定义一个从0到您定义的参数的for循环
Inside for do an array.push示例：myArray.push（NOTES[counter]）
执行计数器++如果计数器为11，则再次将其设置为0
然后在for循环外部返回数组
然后将www.example.com替换keys.map为myFunc（16）.map
每个项目都将是您要查找的数组
希望这能帮助你找到正确的解决方案

如果有人像我一样愚蠢，尤尔根的解决方案是可行的。
我在过去的错误，由于现在给我的数组的类型。

var arr: string[] = [];

所以完整的解决方案应该是这样的

var arr: string[] = [];
  var c = 2;
  for (var i = 0; i < numFrets; i++) {
    arr[i] = NOTES[c].val;
    c++;
    if (c == 12) {
      c = 0;
    }
  }

  return (
    <div>
      {arr.map((item) => (
        <div>{item}</div>
      ))}
    </div>
  );

你可以使用modulo循环回到数组的开头：

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 getNoteSequence(numOfNotes) {
  numOfNotes = numOfNotes || 0;

  const totalNotesDefined = NOTES.length;

  const result = [];
  for (let currNote = 0; currNote < numOfNotes; currNote++) {
    result.push(NOTES[currNote % totalNotesDefined]);
  }

  return result;
}

function generateHTML() {
  const noteSequence = getNoteSequence(14);

  document
    .querySelector('#notes-container')
    .innerHTML = noteSequence
      .map((note) => `<div key="${ note.id }">${ note.val }</div>`)
      .join('');
}

generateHTML();

<div id="notes-container"></div>

正如于尔根已经提到的，下面也做了同样的事情：

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" },
];

const userInput = 14;
const keys = [...Array(13).keys()];
console.log("keys: ", keys);

const prepareFinalList = () => {
  const finalListEl = [];
  let userInputCounter = 0;
  let i = 0;

// this userInput variable required to break the loop
  while(userInputCounter <= userInput) {
    if (i > NOTES.length - 1) {
      i = 0;
    }

    const item = NOTES[i];

    finalListEl[userInputCounter] = (<div key={item.id}>{item.val}</div>)
    
    i++;
    userInputCounter++;
  }

  // this will have the mapped dom structure
  return finalListEl;
};

return (
  <div>
    {/* 
    1. instead of using map you should use different loop. Maybe normal for loop or while loop 
       and prepared your own Dom's array.

    */}
    {prepareFinalList()}
  </div>
);