React开发日历组件报TypeError: Cannot set property '0' of undefined，修改后服务端返回错误码5

问题修复点 #

1. 闰年判断逻辑错误

原checkLeapYear函数非整百年的判断条件写错，导致普通闰年（如2024年）会被识别为平年：

// 错误写法
export const checkLeapYear = (year) => {
  return year % 100 === 0 ? year % 400 === 0 : year % 400 === 0;
};
// 修正后
export const checkLeapYear = (year) => {
  return year % 100 === 0 ? year % 400 === 0 : year % 4 === 0;
};

2. 第一周填充的循环条件错误

原循环条件写死了1 < startDayOfTheYear，和循环变量i完全无关，要么直接不执行要么死循环：

// 错误写法
for (let i = 0; 1 < startDayOfTheYear; i++) {
  dateGrid[0][i][0] = DAYSINMONTH[11] - (startDayOfTheYear - 1) + i;
}
// 修正后
for (let i = 0; i < startDayOfTheYear; i++) {
  dateGrid[0][i][0] = DAYSINMONTH[11] - (startDayOfTheYear - 1) + i;
}

3. 日期取值的语法错误

React组件传value时错误把dateGrid包成了新数组，只要weekIndex大于0就会访问到undefined属性，这是导致报错的核心原因：

// 错误写法
value={[dateGrid][weekIndex][dayIndex][0]}
// 修正后
value={dateGrid[weekIndex][dayIndex][0]}

4. 月份天数没有动态获取

你已经实现了根据闰年动态返回月份天数的getMonthsDaysInYear函数，但生成网格时直接用了常量DAYSINMONTH，闰年2月日期会出错：

// generateDateGrid函数内新增
const currentYear = DATE.getFullYear();
const daysInMonth = getMonthsDaysInYear(currentYear);
// 后续循环把DAYSINMONTH[i]替换成daysInMonth[i]

5. 月份渲染逻辑缺失收尾处理

monthRowFunction的map逻辑只在遇到新月份时返回上一个月的内容，最后一个月的内容不会被返回，会出现undefined项：

// map结束后补充最后一个月的返回
monthRowFunction.push(<MonthComponent mid={currentMonth - 1}>{monthRow}</MonthComponent>);

关于之前的修改建议说明

你初始化dateGrid时每个格子默认填充的是[1]，本身就是三维数组结构，按dateGrid[x][x][0]的逻辑赋值是正确的，改为二维赋值反而会导致后续读取[0]属性时报错，这就是你修改后出现服务端错误码5的直接原因，不需要做这个修改。

排查方向 #

• 修复上述问题后先在本地运行，打印dateGrid检查生成的日期数据是否符合预期，确认没有语法错误再部署
• 服务端错误码5一般是服务端运行代码时抛出未捕获异常导致，优先检查部署包的构建日志是否有报错，如果用了SSR要确认服务端运行时代码没有引用前端独有的变量、没有访问undefined属性

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