API返回月份数字转名称并在Datatable渲染异常问题排查

我需要将API返回的月份数字（1对应January，2对应February……）转换为月份名称并在Datatable中渲染。我编写了以下转换函数，单独传入正确数字时能正常工作，但在表格月份列使用时，所有行都只显示January。

转换函数代码：

function getMonthName(monthNumber) {
    const date = new Date()
    date.setMonth(monthNumber - 1)
    return date.toLocaleString('en-US', { month: 'long' })
}

问题原因 #

你的函数依赖当前日期创建Date对象，当当前日期的天数大于目标月份的最大天数时，调用setMonth会导致日期自动溢出到下一个月，进而可能出现月份显示异常。此外，若在Datatable的列渲染逻辑中未正确传递monthNumber参数，也会导致所有行返回默认的January。

解决方法 #

推荐两种更可靠的实现方式：

方法一：使用固定日期避免溢出 #

创建一个固定日期（如每月1号）的Date对象，彻底规避日期溢出问题：

function getMonthName(monthNumber) {
    // 使用固定日期（2020年每月1号），避免当前日期导致的月份溢出
    const date = new Date(2020, monthNumber - 1, 1);
    return date.toLocaleString('en-US', { month: 'long' });
}

方法二：直接使用月份名称数组映射 #

这种方式更高效，且完全脱离日期对象的潜在问题：

const monthNames = [
    "January", "February", "March",
    "April", "May", "June",
    "July", "August", "September",
    "October", "November", "December"
];

function getMonthName(monthNumber) {
    // 处理无效输入，返回空字符串或默认值
    return monthNames[monthNumber - 1] || '';
}

最后确保Datatable的列渲染逻辑正确传递参数，示例如下：

{
    name: "month",
    label: "Month",
    options: {
        customBodyRender: (value) => getMonthName(value),
    },
}

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