代码之家 › 专栏 › 技术社区 › Exterasmors

如何映射项目列表“n”次,但每次都循环回到开头

react-tsx react-typescript typescript reactjs

0

Exterasmors · 技术社区 · 3 年前

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

其要求是用户将给出多个注释以进行显示。例如,如果用户给出14,则显示

C, C#, D, D#, E, F, F#, G, G#, A, A#, B, C, C#

我现在有这个

  const keys = [...Array(13).keys()];
  console.log("keys: ", keys);
  return (
    <div>
      {keys.map((item) => (
        <div key={item}>{NOTES[item].val}</div>
      ))}
    </div>
  );

但是因为列表中只有12个元素,所以我得到了一个错误。有没有办法让它到达列表中的最后一个元素时,我回到第一个元素并继续“n”次?

4 回复 | 直到 3 年前

1

Yuu 3 年前

而不是使用keys.map

您可以创建一个函数

此函数将接收一个参数(本例中需要注释的次数14)

然后在func内部声明NOTES数组

在0中设置计数器(let变量)

设置一个空数组,之后将用信息填充该数组

定义一个从0到您定义的参数的for循环

在里面做阵列推送示例:myArray.push(NOTES[counter])

执行计数器++ 如果计数器为11,则再次将其设置为0

然后外部for循环返回数组

然后将keys.map替换为myFunc(16).map

每个项目都将是您要查找的数组

希望这能帮助您找到正确的解决方案

2

0

Exterasmors 3 年前

如果有人像我一样愚蠢,尤尔根的解决方案是可行的。

由于现在为我的数组指定了一个类型,我过去遇到过错误。

  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>
  );

3

0

Thatkookooguy eglasius 3 年前

您可以使用 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>

4

0

Amit Chauhan 3 年前

正如尤尔根已经提到的,下面也做了同样的事情:

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>
);