React日期选择器示例报错：item.toLocaleDateString()不是函数（本地正常）

首先，核心问题在于TypeScript的类型标注仅在编译时生效，运行时状态里混入了非Date/null的无效值，而你本地测试没触发报错，只是因为没覆盖到这些异常数据场景。

为什么可选链没生效？ #

item?.toLocaleDateString()里的可选链只会在item是null或undefined时短路跳过方法调用。但如果item是其他类型（比如字符串格式的日期、数字），可选链不会阻止调用——而这些类型本身没有toLocaleDateString()方法，自然会抛出TypeError。

解决步骤： #

1. 渲染时增加运行时类型校验
   修改渲染代码，先判断item是否为Date实例再调用方法，过滤无效值：

   <h1>{multiMonthDates.map((item) => 
     item instanceof Date ? `${item.toLocaleDateString()}, ` : ''
   )}</h1>
   

2. 排查状态赋值的所有入口
   检查setMultiMonthDates的每一处调用：

   • 是否直接把API返回的字符串日期（如"2024-05-20"）塞进状态，没有转成new Date(...)？
   • 清空选择时是否不小心传入了undefined、空字符串这类不符合类型的值？
   • 自定义日期选择器的回调是否返回了非Date/null的数据？

3. 本地复现问题
   手动给multiMonthDates赋值异常数据（比如["2024-05-20", undefined]），就能触发和其他用户一致的报错，方便调试验证。

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