如何修复 Firefox 中计算年龄返回 NaN 的问题-js教程-PHP中文网

如何修复 Firefox 中计算年龄返回 NaN 的问题

在 React 应用中通过日期字符串计算年龄时，Firefox 返回 NaN 而 Chrome 正常，根本原因是错误地对已为字符串的日期值调用了 JSON.stringify()，导致日期格式被破坏（如 "2000-01-01" 变成 ""2000-01-01""），Firefox 严格解析失败，Chrome 则宽容兼容。

在 react 应用中通过日期字符串计算年龄时，firefox 返回 nan 而 chrome 正常，根本原因是错误地对已为字符串的日期值调用了 `json.stringify()`，导致日期格式被破坏（如 `"2000-01-01"` 变成 `""2000-01-01""`），firefox 严格解析失败，chrome 则宽容兼容。

问题核心在于 handleAgeSelect 函数中这行代码：

const computeAge = getAge(JSON.stringify(birthdateInput.current.value));

birthdateInput.current.value 本身就是一个标准的 ISO 格式字符串（例如 "2000-01-01"），直接传入 getAge 即可。而 JSON.stringify() 会将其转为带双引号的 JSON 字符串："\"2000-01-01\"", 即实际传入 new Date() 的是非法格式 ""2000-01-01""。Firefox 的 Date 构造函数对此类格式拒绝解析，返回 Invalid Date，后续 .getFullYear() 等方法调用返回 NaN；Chrome 虽能“尽力”解析部分畸形字符串，但属非标准行为，不可依赖。

✅ 正确写法（移除冗余 JSON.stringify）：

Agora

一款AI工具，主要用于一站式AI电商搜索引擎，适合需要提升相关任务效率的用户。

下载

const handleAgeSelect = (e) => {
  const value = birthdateInput.current.value;
  setBirthdate(value);
  console.log("Raw birth date:", value); // e.g. "2000-01-01"

  const computeAge = getAge(value); // ✅ 直接传入字符串
  console.log("Computed age:", computeAge);
  setAge(computeAge);
};

此外，建议增强 getAge 函数的健壮性，避免因无效日期输入导致静默失败：

function getAge(dateString) {
  if (!dateString || typeof dateString !== 'string' || dateString.trim() === '') {
    return null; // 或抛出错误、返回 0，按业务需求处理
  }

  const today = new Date("2022-12-31"); // ⚠️ 注意：此固定日期应替换为动态 `new Date()`
  const birthDate = new Date(dateString);

  // 验证日期有效性
  if (isNaN(birthDate.getTime())) {
    console.warn(`Invalid birth date: ${dateString}`);
    return null;
  }

  let age = today.getFullYear() - birthDate.getFullYear();
  const m = today.getMonth() - birthDate.getMonth();
  if (m <p>? 关键注意事项：</p>