React 18 中日期格式化工具函数未定义的常见原因与正确导出方式_技术教程

本文解析 react 18 应用中因函数作用域和模块导出不当导致“formatdatelong is not defined”错误的根本原因，并提供两种符合现代 typescript/esm 规范的可靠修复方案。

在 React 18 项目中使用 Moment.js 进行日期格式化时，若将辅助函数封装在闭包内却未正确暴露，就会触发 ReferenceError: formatDateLong is not defined —— 这并非 React 或 Moment 的问题，而是 JavaScript 模块作用域与导出机制的理解偏差所致。

回顾原始代码：

// src/utils/datetime-formatter.ts
import moment from "moment";

function dataTimeFormatter() {
  const formatDateLong = (value) => moment(value).format("MMMM DD, YYYY");
  const formatDateShort = (value) => moment(value).format("MMM DD, YYYY");
  const yearsAgo = (value) => moment(value, "YYYYMMDD").fromNow(true);
} // ❌ 函数执行后立即销毁所有内部变量，无任何返回或导出

此处 dataTimeFormatter 是一个无返回值、不导出任何内容的普通函数。其内部声明的 formatDateLong 等变量仅在函数执行期间存在，属于局部作用域，无法被外部模块访问。因此，当你在组件中 import dataTimeFormatter from "..."; 后直接使用 formatDateLong(...)，TypeScript 和运行时均无法识别该标识符——它根本不存在于模块的导出命名空间中。

✅ 正确解法一：命名导出（推荐）

采用 ES 模块标准的 export const 方式，清晰、可树摇（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);
};

组件中按需导入并使用：

// Actordetails.tsx
import { formatDateLong } from "../../utils/datetime-formatter";

function ActorDetails({ actor }: { actor: Actor }) {
  return (
    
      {actor.birthday && actor.place_of_birth ? (
        
          Born in {actor.place_of_birth}, on{" "}
          {formatDateLong(actor.birthday)}
        
      ) : null}
    
  );
}

✅ 正确解法二：默认导出对象

若偏好统一命名空间管理，可导出一个工具对象（注意命名一致性：dateTimeFormatter 而非 dataTimeFormatter）：

// 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";

// ...
{dateTimeFormatter.formatDateLong(actor.birthday)}

⚠️ 注意事项与最佳实践

避免 Moment.js 的全局污染风险：Moment 已进入维护模式，建议新项目考虑 date-fns 或 dayjs（轻量、不可变、API 类似 Moment）。
类型安全增强：为参数添加 string | number | Date 联合类型，兼容 TMDB API 常见的 ISO 字符串（如 "1990-05-12"）及时间戳。
空值防护（进阶）：生产环境建议增加 if (!value) return "" 判断，防止 moment(undefined) 返回无效日期。
不要忽略 ESLint 警告：'formatDateLong' is assigned a value but never used 是关键线索——它明确指出该变量未被导出或引用，应立即检查模块导出逻辑。

总之，核心原则是：模块导出的内容必须显式声明（export）或作为默认值返回（export default），绝不能依赖闭包内未暴露的局部变量。 遵循此规范，即可彻底解决此类“函数未定义”问题。