如何在React的map循环中结合Moment.js逐次递增日期？

核心问题解决思路 #

你当前每次渲染都用固定的date对象，所以所有列都显示同一天。要实现周一到周日的日期递增，需要先拿到本周一的起始日期，再在map循环中根据索引给日期加对应天数。

具体代码修改步骤 #

1. 先计算本周一的起始日期（Moment.js默认周日为一周开始，用isoWeekday(1)强制设周一为一周第一天）：

const date = new Date();    
const startOfWeek = moment(date).isoWeekday(1); // 获取本周一的日期对象

2. 在dayNames.map循环中，基于起始日期加dayIndex天（注意用clone()避免修改原日期对象，因为Moment是可变的）：

{dayNames.map((item, dayIndex) => 
  <div className="day-column" key={dayIndex}>
    <h2>{item.longName}</h2>
    <h2>{item.testDate}</h2>
    {/* 修改后的日期渲染逻辑 */}
    {startOfWeek.clone().add(dayIndex, 'days').format('DD/MM/YYYY')}
    {hours.map((hour, hourIndex) => {...}
  </div>
)}

额外说明 #

• 不用纠结id递增的方案，因为你需要的是日期的偏移计算，不是单纯的数字累加，直接基于起始日做天数偏移才是正确逻辑。
• 如果需要以周日为一周起始，把isoWeekday(1)改成startOf('week')即可。

内容的提问来源于stack exchange，提问作者MarcinB