React / Javascript for loop - 超过数组长度时从 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)]); }

Answer 2

您可以像这样修改 viewNextLyric 函数

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

这样当您处于最后一个索引处并单击下一步时，它会增加索引并执行模数运算，结果为您提供 0。

你的 viewPreviousLyric 函数也需要修改

async function viewPreviousLyric(e) {
    e.preventDefault();
    let currentIndex = await checkLyricIdx();
    setChosenLyricId( currentIndex === 0? setlist.lyrics[setlist.lyrics.length-1] : setlist.lyrics[currentIndex - 1]  );
}

或者

async function viewPreviousLyric(e) {
    e.preventDefault();
    let currentIndex = await checkLyricIdx();
    setChosenLyricId( currentIndex === 0? setlist.lyrics[0] : setlist.lyrics[currentIndex - 1]  );
}

取决于您希望以前的功能如何工作。