React / Javascript for 循环 - 当超过数组长度时从 idx 0 开始

Question

我希望你们中的一个人能够帮助我解决 javascript/react 问题。我正在构建一个 Web 应用程序，您作为用户可以在其中创建带有歌词 id 的歌单。这意味着当打开曲目列表时，您可以查看该曲目列表中引用的每首歌词。在窗口的底部，我有一个上一个和下一个按钮，可让您从列表中查看下一个或上一个歌词。

我的问题是，当到达歌词列表的末尾/最后一个索引号并且我尝试单击“下一步”时，for 循环中断并且我的页面崩溃。我想要它做的是，当达到歌词数组的长度并且您尝试超过时，for 循环再次从索引 0 重新开始。我尝试了多种方法和理论，但似乎找不到任何有效的方法。

这是我拥有的歌词 id 数组。

['Id1', 'Id2', 'Id3', 'Id4']

这是我的函数，用于检查当前索引号/当前正在查看的歌词 id。该函数返回当前索引号。

function checkLyricIdx() {
        let setlistLength = setlist.lyrics.length;
        for (var i = 0; i < setlistLength; i++) {
            if (setlist.lyrics[i] === chosenLyricId) {
                return i;
            }
        }
 }

这是“查看下一首歌词”功能，它首先检查当前索引号，然后使用下一首歌词 id 更新状态（通过增加 idx 编号来实现）。

async function viewNextLyric(e) {
        e.preventDefault();
        let currentIndex = await checkLyricIdx();
        setChosenLyricId(setlist.lyrics[currentIndex + 1]);
    }

查看上一首歌词id的功能与上面几乎相同，只是将currentIndex减1。

只是为了澄清我的问题。我怎样才能重做这个函数，以便它在超过数组长度时不会中断？我希望这样当尝试超过数组的长度时，它会重新启动到索引 0/您重新查看列表。当我到达最后一个歌词 id 并尝试单击“下一步”时，应用程序崩溃并显示以下内容：

类型错误：未定义不是对象（评估“chosenLyricId.length”）

Answer 1

如果您希望索引从任一端换行，请使用模数运算。

const dataArray = ['id1', 'id2', 'id3', 'id4', 'id5', 'id6', 'id7'];

const wrapIndex = (arr, index) => index % arr.length;

for (let i = 0; i < 50; i++) {
  console.log('Iteration', i, 'index', wrapIndex(dataArray, i), dataArray[wrapIndex(dataArray, i)]);
}

如果需要，您也可以绑定它。

const dataArray = ['id1', 'id2', 'id3', 'id4', 'id5', 'id6', 'id7'];

const bound = (min, max, val) => Math.max(min, Math.min(val, max));

const boundIndex = (arr, index) => bound(0, arr.length - 1, index);

for (i = -3; i < 10; i++) {
  console.log('Iteration', i, 'index', boundIndex(dataArray, i), dataArray[boundIndex(dataArray, i)]);
}