React 18应用中外置日期辅助函数失效的原因及修复方案

1. 错误原因 #

• 你在datetime-formatter.ts中将formatDateLong、formatDateShort、yearsAgo定义在了dataTimeFormatter函数的内部，这些函数属于函数私有作用域，没有被暴露到模块外部，外部组件无法直接访问。
• 在Actordetails.jsx中直接调用formatDateLong时，该函数在组件的作用域中不存在，因此触发“'formatDateLong' is not defined”错误；而datetime-formatter.ts里的内部函数因为从未被外部引用，编译器会提示“'formatDateLong' is assigned a value but never used”。

2. 最可靠的修复方法 #

核心是将需要使用的函数通过ES模块规范导出，以下两种方案任选其一：

方案1：直接导出单个函数 #

修改src/utils/datetime-formatter.ts，将每个函数单独导出：

import moment from 'moment';

export const formatDateLong = (date: string) => {
  return moment(date).format('YYYY年MM月DD日'); // 可根据需求调整格式
};

export const formatDateShort = (date: string) => {
  return moment(date).format('YYYY-MM-DD');
};

export const yearsAgo = (date: string) => {
  return moment().diff(moment(date), 'years');
};

在Actordetails.jsx中按需导入并调用：

import { formatDateLong } from '../utils/datetime-formatter';

// 使用方式
const formattedBirthday = formatDateLong(actor.birthday);

方案2：导出包含所有函数的对象 #

如果希望保持统一的命名空间，可将函数挂载到dataTimeFormatter对象上导出：

import moment from 'moment';

const formatDateLong = (date: string) => {
  return moment(date).format('YYYY年MM月DD日');
};

const formatDateShort = (date: string) => {
  return moment(date).format('YYYY-MM-DD');
};

const yearsAgo = (date: string) => {
  return moment().diff(moment(date), 'years');
};

export const dataTimeFormatter = {
  formatDateLong,
  formatDateShort,
  yearsAgo
};

在Actordetails.jsx中导入对象并调用：

import { dataTimeFormatter } from '../utils/datetime-formatter';

// 使用方式
const formattedBirthday = dataTimeFormatter.formatDateLong(actor.birthday);

这两种方案都能彻底解决报错：组件可以正确访问到目标函数，同时datetime-formatter.ts里的函数因为被外部引用，也会消除“未使用”的提示，完全符合ES模块的规范，类型安全且易于维护。

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