React动态添加支出列表时报TypeError: Date.getFullYear is not a function错误

报错原因 #

• 核心问题是你传入ExpanseDates组件的Date属性值，动态场景下不是合法的Date实例：静态列表写死的日期是提前创建好的Date对象，而用户输入表单的date类型输入框返回值是ISO格式的日期字符串，字符串原型上没有getFullYear、toLocaleString这些Date对象的方法，调用就会抛出类型错误。
• 额外隐患：你把组件的props命名为Date，和JS原生的Date构造函数重名，容易出现作用域混淆问题。

解决步骤 #

1. 修正props命名，避免命名冲突
   先把ExpanseDates组件的props名改成不冲突的命名，避免和原生Date对象混淆：

// Expanse.js 中修改传参
<ExpanseDates dateVal={date} />

2. 组件内统一做日期类型转换
   拿到传入的值后，先统一转成Date实例再调用相关方法：

// ExpanseDate.js 开头添加转换逻辑
const { dateVal } = props;
// 字符串格式自动转成Date实例
const validDate = typeof dateVal === 'string' ? new Date(dateVal) : dateVal;

// 后续都用validDate调用日期方法
let month = validDate.toLocaleString("en-US", { day: "2-digit" });
let day = validDate.toLocaleString("en-US", { month: "long" });
let year = validDate.getFullYear();

3. 可选添加异常兼容逻辑
   如果担心出现非法日期输入，可以加有效性判断避免页面崩溃：

if (isNaN(validDate.getTime())) {
  return <span>日期无效</span>
}

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