Question

我正在尝试遍历日期范围以创建日期的引导标题行。以下是我的代码：-

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浏览器中收到一条消息，提示

在潜在的内存不足崩溃之前暂停

浏览器控制台显示以下输出

https://developer.atlassian.com/bitbucket/api/2/reference/resource/repositories/%7Busername%7D/%7Brepo_slug%7D/filehistory/%7Bnode%7D/%7Bpath%7D

如果我删除循环并输入一些虚拟数据，则一切正常。

Answer 1

我认为您不能将其用作迭代器。此外，使用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;

与您想做的事情相同。虽然日期不相同，但请推送至数组并添加新的日期。

Answer 2

yBrodsky回答了主要问题，但我只是想补充一点，您还需要向组件提供 key 属性以提供唯一的ID-这将消除您看到的其他警告。大概可以用这个日期

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

Answer 3

在循环中渲染元素列表时，应向该元素添加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>)

在for循环中使用矩对象

3 个答案: