Использование объекта момента в цикле for - PullRequest
Новая
       7

Использование объекта момента в цикле for

0 голосов
/ 21 ноября 2018

Я пытаюсь перебрать диапазон дат для создания строки заголовка начальной загрузки.Ниже приведен мой код: - 

renderHeader(){
    var dates = [];
    const start = "2018-11-10";
    const end = "2018-11-24";
    console.log('Trying to enter the loop');
    for(let date = moment(start); date.isSame(end); date.add(1,'d')){
        console.log(date.format("Do MMM YYYY"));
        console.log(date.isSame(end));
        dates.push(<Col>{date.format("Do MMM YYYY")}</Col>);
    }
    dates.push(<Row>{dates}</Row>);
    //dates.push(<Row><Col>Dummy</Col></Row>);
    return dates;
}

По какой-то причине элемент управления не входит в цикл, и я получаю сообщение в браузере Chrome, в котором говорится:

Приостановлено перед возможным выходом.сбоя памяти

Консоль браузера показывает следующий вывод

enter image description here

Если удалить цикл и ввести некоторые фиктивные данныетогда все работает нормально.

Ответы [ 3 ]

0 голосов
/ 21 ноября 2018

yBrodsky ответил на главный вопрос, но я просто хотел добавить, что вам также нужно предоставить компоненту key свойство для предоставления уникального идентификатора - это избавит от другого предупреждения, которое вы видите.Вероятно, можно просто использовать дату для этого 

while(!start.isSame(end)) {
   dates.push(<Col key={start.format("YYYY-MM-DD")}>{start.format("Do MMM YYYY")}</Col>);
   start.add(1, 'day');
}
0 голосов
/ 21 ноября 2018

Когда вы визуализируете список элементов в цикле, вы должны добавить key prop к элементу.

Изменить эту строку 

dates.push(<Col>{date.format("Do MMM YYYY")}</Col>)

на 

const formattedDate = date.format("Do MMM YYYY");
dates.push(<Col key={formattedDate}>{formattedDate}</Col>)
0 голосов
/ 21 ноября 2018

Я не думаю, что вы можете использовать это как итератор.Кроме того, было бы проще с циклом while. 

var dates = [];
const start = moment("2018-11-10");
const end = moment("2018-11-24");

while(!start.isSame(end)) {
  dates.push(<Col>{start.format("Do MMM YYYY")}</Col>);
  start.add(1, 'day');
}

return dates;

Тот же принцип, что и вы хотели сделать.Пока дата не совпадает, нажмите на массив и добавьте новый день.

...