React组件中props.date调用toISOString报TypeError错误如何解决？

错误产生原因 #

这个TypeError: Cannot read properties of undefined (reading 'toISOString')报错的核心原因是调用toISOString()方法的props.date值为undefined，常见触发场景如下：

• 父组件引用ExpenseItem组件时，没有传递date属性，或者属性名拼写错误（比如误写为Date、data等）
• 传入的date值本身不是合法Date对象，或者组件在异步数据加载完成前就触发了渲染，此时date还没有被赋值

修复方案 #

• 先排查父组件传参：确认调用ExpenseItem时正确传递了date属性，且传入的值是合法的Date类型
• 增加空值防御逻辑，避免偶发空值导致页面崩溃：
  可以用可选链简化写法：

  <div>{props.date?.toISOString()}</div>
  

  也可以加三元判断显示兜底占位内容：

  <div>{props.date ? props.date.toISOString() : '暂无日期'}</div>
  

• 额外提示：你的代码中expense-item__price对应的div属性写的是原生的class，React中需要改成className才能正常生效样式。

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