如何通过date-fns将MySQL datetime格式转换为相对时间？

错误原因分析 #

你遇到的Invalid time value错误主要来自两个点：

1. MySQL返回的datetime是字符串格式（如2023-02-01 21:25:33），未转换为Date对象就传给date-fns函数，导致库无法识别时间值。
2. formatRelative的参数顺序错误，且不必要地使用了subDays——该函数的正确参数顺序是formatRelative(目标日期, 基准日期)，你错误地对目标日期做了减天数处理，还颠倒了参数位置。

解决方案 #

如果你需要直接生成“X ago”格式的相对时间，推荐使用date-fns的formatDistanceToNow方法，比formatRelative更贴合需求；如果需要更详细的相对描述（如“last Friday at 9:25 PM”），则修正formatRelative的用法即可。

方案1：用formatDistanceToNow生成“... ago”格式

import { formatDistanceToNow } from 'date-fns';

const formatDate = (dateStr) => {
  // 处理MySQL datetime格式：替换空格为T，转为标准ISO格式，确保Date对象能正确解析
  const date = new Date(dateStr.replace(' ', 'T'));
  
  // 加参数addSuffix: true，自动添加" ago"后缀
  return formatDistanceToNow(date, { addSuffix: true });
};

// 在组件中使用
<p>Posted {formatDate(post.date)}</p>

方案2：修正formatRelative的用法（详细相对描述）

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

const formatDate = (dateStr) => {
  // 转换MySQL字符串为Date对象，parseISO能更好地处理ISO格式
  const date = parseISO(dateStr.replace(' ', 'T'));
  
  // 正确参数顺序：目标日期在前，基准日期（当前时间）在后
  return formatRelative(date, new Date());
};

// 在组件中使用
<p>Posted {formatDate(post.date)}</p>

额外容错处理 #

为了避免后端返回无效日期（如null、空字符串）导致报错，可以在函数中加入判断：

import { formatDistanceToNow } from 'date-fns';

const formatDate = (dateStr) => {
  if (!dateStr) return 'Unknown date';
  
  const date = new Date(dateStr.replace(' ', 'T'));
  // 检查日期是否有效
  if (isNaN(date.getTime())) return 'Invalid date';
  
  return formatDistanceToNow(date, { addSuffix: true });
};

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