本文详解 react 18 项目中因函数作用域与导出方式不当导致“未定义”错误的根本原因，并提供两种规范、可维护的日期格式化工具函数导出方案。
在 React 18 应用中使用外部工具函数（如日期格式化）时，一个典型却容易被忽视的错误是：将函数定义在闭包内部却未正确暴露或导出。您在 datetime-formatter.ts 中定义的 formatDateLong、formatDateShort 和 yearsAgo 均为 dataTimeFormatter 函数体内的局部变量——它们仅在其父函数执行期间存在，一旦函数返回，这些变量即被销毁，既无法从外部访问，也无法被模块系统导出。
这直接导致两个问题：
- 在组件中 import dataTimeFormatter from '...' 后，formatDateLong 并未挂载到导入对象上，因此 JSX 中调用会报错 'formatDateLong' is not defined；
- TypeScript/ESLint 检测到这些变量声明后从未被读取或返回，故提示 'formatDateLong' is assigned a value but never used。
✅ 正确做法是让这些工具函数脱离局部作用域，成为可导出的顶层绑定。以下是两种推荐方案：
方案一：命名导出（推荐 ✅）
清晰、可树摇（tree-shakable）、支持按需导入，适合中大型项目：
// src/utils/datetime-formatter.ts
import moment from "moment";
export const formatDateLong = (value: string | number | Date): string => {
return moment(value).format("MMMM DD, YYYY");
};
export const formatDateShort = (value: string | number | Date): string => {
return moment(value).format("MMM DD, YYYY");
};
export const yearsAgo = (value: string): string => {
return moment(value, "YYYYMMDD").fromNow(true);
};组件中按需导入并使用：
Orderly Sdk React Hooks
下载
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
// Actordetails.tsx
import { formatDateLong } from "../../utils/datetime-formatter";
function ActorDetails() {
// ... 其他逻辑
return (
<div className="row">
{actor.birthday && actor.place_of_birth ? (
<p className="birth-info small">
Born in <strong>{actor.place_of_birth}</strong>, on{" "}
<strong>{formatDateLong(actor.birthday)}</strong>
</p>
) : null}
</div>
);
}方案二：默认导出对象（适用轻量封装）
若偏好统一命名空间管理，可导出一个工具对象：
// src/utils/datetime-formatter.ts
import moment from "moment";
const dateTimeFormatter = {
formatDateLong: (value: string | number | Date): string =>
moment(value).format("MMMM DD, YYYY"),
formatDateShort: (value: string | number | Date): string =>
moment(value).format("MMM DD, YYYY"),
yearsAgo: (value: string): string =>
moment(value, "YYYYMMDD").fromNow(true),
} as const;
export default dateTimeFormatter;使用时注意路径引用和属性访问：
import dateTimeFormatter from "../../utils/datetime-formatter";
// ...
<strong>{dateTimeFormatter.formatDateLong(actor.birthday)}</strong>⚠️ 注意事项：
- 避免在工具函数中硬编码格式字符串（如 "YYYYMMDD"），建议提取为常量或通过参数配置，提升复用性；
- Moment.js 已进入维护模式，生产环境推荐逐步迁移至 Luxon 或 date-fns（更轻量、Tree-shaking 友好）；
- 若使用 TypeScript，请为参数添加明确类型（如示例中的 string | number | Date），避免运行时 moment 解析失败。
总结：工具函数必须显式导出，而非隐式封闭在函数体内；优先采用命名导出，兼顾可读性、可维护性与打包优化能力。
