React应用中Firefox计算年龄返回NaN问题求助

问题根源 #

你调用getAge时错误地使用了JSON.stringify(birthdateInput.current.value)，这会把原本的日期字符串（比如"2023-10-05"）转换成带双引号的字符串（'"2023-10-05"'）。Firefox的Date构造函数无法解析这种包含额外引号的字符串，会返回Invalid Date，后续计算birthDate.getFullYear()时就会得到NaN，最终导致年龄计算结果为NaN。其他浏览器可能对这种格式有更强的容错性，所以能正常运行。

修复步骤 #

1. 移除多余的JSON.stringify
   直接传递原始的日期字符串给getAge函数即可：

   const computeAge = getAge(birthdateInput.current.value)
   

2. 优化代码：避免使用ref，改用事件对象获取值
   React中更推荐通过e.target.value直接获取输入值，而非依赖ref，代码更符合React数据流模式：

   const handleAgeSelect = (e) => {
     const inputDate = e.target.value;
     setBirthdate(inputDate);
     const computeAge = getAge(inputDate);
     console.log("selected Age", computeAge);
     setAge(computeAge);
   };
   

3. 添加日期有效性校验
   为避免无效日期输入导致的错误，在getAge函数中先校验日期有效性：

   function getAge(dateString) {
     const today = new Date("2022-12-31");
     const birthDate = new Date(dateString);
     // 校验日期是否有效
     if (isNaN(birthDate.getTime())) {
       return 0; // 可根据业务需求改为返回错误提示或其他默认值
     }
     let age = today.getFullYear() - birthDate.getFullYear();
     const m = today.getMonth() - birthDate.getMonth();
     if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
       age--;
     }
     return age;
   }
   

额外建议 #

• 若需要动态使用当前日期而非固定的2022-12-31，可替换为const today = new Date();，如果需要统一时区，可使用Date.UTC构造日期。
• 隐藏的年龄输入框建议添加readOnly属性，避免用户手动修改，同时确保defaultValue与状态同步。

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