JavaScript中1月（索引0）时URI无法切换至下月问题排查

问题核心 #

当当前视图为1月（对应索引0）时，点击下月按钮后页面仍停留在1月的URI，updateURI接收的参数与当前月份一致；但上月按钮可正常跳转至上一年最后一个月。

原因排查 #

1. 参数追加导致重复：updateURI函数直接通过&拼接新参数，若原URL已包含from/to参数，会生成重复参数（例如xxx?from=2024-01-01&to=2024-01-31&from=2024-02-01&to=2024-02-29）。URLSearchParams.get()只会读取第一个出现的参数，页面刷新后initCurrentMonthAndYear仍获取旧的1月参数，导致视图未更新。
2. 潜在日期解析风险：若未提供的getMonthAndYearFromDate函数存在解析错误，也可能影响currentMonthIndex的更新，但结合上月功能正常的表现，此可能性较低。

解决方案 #

修改updateURI函数，使用URLSearchParams管理查询参数，确保替换而非追加from和to：

function updateURI(from, to) {
    // 基于当前页面URL创建URL对象
    const url = new URL(window.location.href);
    // 更新或覆盖参数
    url.searchParams.set('from', from);
    url.searchParams.set('to', to);
    // 跳转至新URL
    window.location.href = url.toString();
}

额外验证点 #

确认getMonthAndYearFromDate函数的解析逻辑正确，以下是参考实现：

function getMonthAndYearFromDate(dateStr) {
    const date = new Date(dateStr);
    return {
        month: date.getMonth(),
        year: date.getFullYear()
    };
}

测试步骤 #

1. 点击下月按钮后，检查浏览器地址栏，确认URL仅包含一组from/to参数；
2. 在控制台调用initCurrentMonthAndYear()，验证currentMonthIndex和currentYear是否为目标月份的对应值。

内容的提问来源于stack exchange，提问作者Gabriel Z.