如何在React JSX中格式化并展示Mongoose生成的时间戳？

问题分析 #

数据库中存储的createdAt是ISO格式字符串（如2023-11-02T02:55:54.488+00:00），但前端拿到的是毫秒级时间戳（如1698893754488），直接传给date-fns时因参数类型不符合预期导致无效日期错误。

解决方案 #

方案1：前端直接转换时间戳为Date对象

date-fns的格式化函数需要接收Date类型参数，将时间戳转为Date对象后再传入即可：

import { format } from 'date-fns';

// 假设从接口获取的createdAt为数字类型时间戳
const formattedCreatedAt = format(new Date(createdAt), 'yyyy-MM-dd HH:mm:ss');

如果前端拿到的是字符串类型的时间戳，先转成数字再处理：

const formattedCreatedAt = format(new Date(Number(createdAt)), 'yyyy-MM-dd HH:mm:ss');

方案2：在Mongoose层配置返回ISO格式字符串

修改Schema的toJSON配置，让timestamps字段序列化时返回ISO字符串，前端可直接解析：

const YourSchema = new mongoose.Schema(
  {
    // 你的业务字段
  },
  {
    timestamps: true,
    toJSON: {
      transform(doc, ret) {
        // 将Date对象转为ISO字符串
        ret.createdAt = ret.createdAt.toISOString();
        ret.updatedAt = ret.updatedAt.toISOString();
        return ret;
      }
    }
  }
);

前端使用parseISO解析ISO字符串后格式化：

import { parseISO, format } from 'date-fns';

const formattedCreatedAt = format(parseISO(createdAt), 'yyyy-MM-dd HH:mm:ss');

方案3：检查后端序列化配置

如果后端使用Express等框架，排查是否有中间件（如express.json()）或自定义序列化逻辑将Date对象转为时间戳。可调整序列化规则，保留Date对象的ISO格式输出。

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