React应用不同时区下日期时间处理问题求助

问题核心 #

用户选择本地时间（如2023-08-24 21:30 GMT+01）存入数据库时偏差1小时，检索后显示再偏差1小时；部署到固定时区的LWS服务器后偏差扩大到2小时，本质是前后端时区处理不统一导致的时间偏移。

根本原因 #

1. 存储阶段：前端未将本地时间转换为标准UTC时间就传给后端，后端依赖服务器时区做转换，导致存储的UTC时间错误。
2. 检索阶段：后端返回的UTC时间本身有误，前端格式化时未正确映射回用户本地时区。
3. LWS服务器固定时区进一步放大了后端转换的偏差。

解决方案 #

1. 存储：统一传输UTC时间到后端 #

用户选择本地时间后，必须转换为UTC格式的ISO字符串（带Z后缀）再传给后端，后端直接存储该UTC时间，不做任何时区转换。

前端代码示例

// userSelectedDate 是日历组件返回的本地时间Date对象
const utcISOString = userSelectedDate.toISOString();
// 发送请求时携带UTC格式字符串
axios.post('/api/reservations', { dateTime: utcISOString });

2. 检索：将UTC时间转回用户本地时区显示 #

后端返回UTC格式字符串后，前端将其转换为用户本地时区的Date对象，再格式化显示，确保和用户当初选择的时间一致。

前端代码调整

import { format } from 'date-fns';

// res.data[0].dateTime 是后端返回的UTC字符串（如"2023-08-24T20:30:00.000Z"）
const localDate = new Date(res.data[0].dateTime);

// 格式化显示为本地时间的时分
<td className="border border-neutral-500 p-3">
  {format(localDate, 'kk:mm')}
</td>

3. 适配LWS服务器固定时区 #

因LWS无法修改系统时区，后端需严格遵循以下规则：

• 数据库字段使用支持UTC的类型（如PostgreSQL的TIMESTAMP WITH TIME ZONE、MySQL的DATETIME）。
• 后端代码直接读写UTC时间，禁止依赖服务器本地时区做任何转换。

关键原则 #

• 传输/存储用UTC：全程以UTC时间作为中间标准，避免依赖前后端本地时区。
• 前端负责时区映射：仅在用户选择（本地转UTC）和显示（UTC转本地）阶段处理时区转换。
• 后端不碰时区：直接存储、返回UTC时间，不做任何时区偏移处理。

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