Moment.js格式化UTC时间结果与接口返回值不一致问题

问题基础信息 #

• 接口返回时间字段值：created_on: "2022-06-06T12:00:37.000Z"
• 原有业务代码：

<div style={{whiteSpace: 'nowrap'}}>Created On :</div> 
<b style={{ marginLeft: '20px', fontSize: 15 }}>{createdOn ? moment.utc(createdOn).format('MMMM Do YYYY, HH:mm a') : ''}</b>

• 实际渲染结果：JUNE 16th 2022, 10:28 am
• 预期渲染结果：JUNE 6th 2022, 12:00 pm

注：UTC时间12:00为正午，对应12pm，凌晨0点才对应12am，原预期的am标识有误

问题原因 #

1. 核心原因：传入moment.utc()的createdOn变量值和接口返回值不一致。直接用接口返回的2022-06-06T12:00:37.000Z执行相同格式化逻辑，固定输出June 6th 2022, 12:00 pm，不可能出现日期差10天、时间偏移1个多小时的结果，大概率是字段映射错误、或前置逻辑篡改了createdOn的值。
2. 格式化串逻辑冲突：格式符HH代表24小时制小时（取值范围00-23），和上下午标识a搭配使用本身就不符合规范，容易出现时间显示错误。

修复步骤 #

1. 先排查变量赋值链路：在格式化逻辑前加日志console.log('传入格式化的createdOn值：', createdOn)，确认传入值就是接口返回的2022-06-06T12:00:37.000Z，重点检查有没有字段映射写错、提前做过时区转换/时间偏移计算、把其他时间字段赋值给createdOn的问题。
2. 修正格式化串：如果需要显示上下午标识，把24小时制的HH替换为12小时制的hh，修正后的代码如下：

<div style={{whiteSpace: 'nowrap'}}>Created On :</div> 
<b style={{ marginLeft: '20px', fontSize: 15 }}>{createdOn ? moment.utc(createdOn).format('MMMM Do YYYY, hh:mm a') : ''}</b>

3. 按需选择时区模式：如果要固定显示UTC标准时间，保留moment.utc()调用即可；如果要按用户所在本地时区显示时间，把moment.utc(createdOn)替换为moment(createdOn)。

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