React / Javascript для l oop - запуск с idx 0 при превышении длины массива - PullRequest
Новая
       17

React / Javascript для l oop - запуск с idx 0 при превышении длины массива

3 голосов
/ 02 апреля 2020

Я надеюсь, что один из вас сможет помочь мне с javascript / ответить на вопрос. Я создаю веб-приложение, в котором вы, как пользователь, можете создавать сет-листы с идентификаторами lyri c внутри. Это означает, что при открытии сет-листа вы можете просмотреть все лиры c, на которые есть ссылки в этом сет-листе. В нижней части окна у меня есть предыдущая и следующая кнопка, которая позволяет просматривать следующий или предыдущий лири c из списка.

Моя проблема в том, что при достижении конечного / последнего номера индекса списка песен, и я пытаюсь щелкнуть далее, в течение l oop разрывается, и моя страница падает. Я хочу, чтобы после того, как длина массива текстов была достигнута и вы пытаетесь превысить его, значение для l oop снова перезапускается с индекса 0. Я пробовал несколько вещей и теорий, но я не могу найти ничего, что работает.

Это массив лири c идентификаторов, которые у меня есть. 

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

Вот моя функция, чтобы проверить текущий номер индекса / Какой лири c идентификатор, который просматривается прямо сейчас. Эта функция возвращает текущий индексный номер. 

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

Вот функция «Просмотр следующего лири c», которая сначала проверяет текущий индексный номер, а затем обновляет состояние следующим лири c id (Делая это, увеличивая номер idx). 

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

Функция просмотра предыдущего идентификатора lyri c почти такая же, как указано выше, я просто минус 1 к текущему индексу.

Просто чтобы прояснить мой вопрос. Как я могу переделать эту функцию, чтобы она не сломалась при превышении длины массива? Я хочу, чтобы при попытке превышения длины массива он перезагружался до индекса 0 / вы просматривали список заново. Когда я достигаю последнего идентификатора lyri c и пытаюсь нажать кнопку «Далее», приложение создает sh и говорит следующее:

TypeError: undefined не является объектом (оценивается selectedLyricId.length). «)

Ответы [ 2 ]

3 голосов
/ 02 апреля 2020

Используйте операцию модуля, если вы хотите, чтобы индекс был перенесен с любого конца. 

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)]);
}
1 голос
/ 02 апреля 2020

Вы можете изменить функцию viewNextLyri c следующим образом: 

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

, чтобы при последнем указании индекса и нажатии следующего он увеличивал индекс, выполнял операцию модуля и давал Вы 0 в результате.

Ваша функция viewPreviousLyri c также должна быть изменена 

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

В зависимости от того, как вы хотите использовать предыдущую функциональность на работу.

...