MomentJS格式化后日期偏移一天，组件同步引发无限循环求助

我在开发中需要为一个组件提供Unix时间戳，为另一个组件提供年月日的文本显示格式，且两者均可修改，后者需与前者同步日期。但目前因格式化操作总是使日期偏移一天，导致出现无限循环，请问如何获取正确日期？

相关代码 #

const formatTime = ({ date, format = DEFAULT_FORMAT }: OwnProps): string => {
  const inutc = utc(date);
  console.log('inutc', inutc)
  const formatted = inutc.format(format);
  return formatted
}

日期偏移的核心原因 #

你用utc(date)强制将日期转为UTC时区，但如果原始date本身是本地时间（比如由Unix时间戳转换而来的本地日期），转UTC后会因为时区差导致日期偏移（例如东八区的本地日期转UTC会减去8小时，可能跨天）。

具体修复方案 #

• 统一时区处理逻辑
  如果业务不需要UTC时间，直接用本地时区处理日期，移除utc()转换：

  // 假设使用moment.js的示例（原生JS可替换为Intl.DateTimeFormat）
  const formatTime = ({ date, format = DEFAULT_FORMAT }: OwnProps): string => {
    const targetDate = typeof date === 'number' ? new Date(date) : date;
    return moment(targetDate).format(format);
  }
  

  若确实需要UTC时间，要确保所有组件的日期处理都统一用UTC，避免本地/UTC混合操作。

• 解决无限循环
  无限循环的根源是格式化后的日期转回时间戳时产生了偏移值，触发状态更新和重复渲染。解决方式是：

  • 始终用原始Unix时间戳作为唯一数据源存储；
  • 两个组件分别基于这个时间戳做转换：一个直接输出时间戳，另一个格式化日期文本；
  • 当用户修改日期文本时，将文本解析为本地日期后转为时间戳更新状态，而非直接用格式化后的日期对象更新。

• 验证转换一致性
  检查所有日期转换环节，确保时间戳转日期、日期文本转时间戳都使用同一时区（本地或UTC），避免因时区差异产生的偏移值触发不必要的状态更新。

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