为什么React中调用JavaScript方法会出现undefined报错？

根因分析 #

当前报错核心原因是props.date不是合法的Date类型实例，大概率是父组件传递属性时传入了空值、字符串/数字类型的日期，未提前转成Date对象，导致调用toLocaleString、getFullYear方法时触发类型错误。

修复步骤 #

• 第一步：给组件增加日期合法性校验，避免空值直接报错
  修改代码中日期取值逻辑如下：

import './ExpenseItem.css';

function ExpenseItem(props) {
  // 兼容字符串/时间戳格式的日期输入
  const parsedDate = ['string', 'number'].includes(typeof props.date) ? new Date(props.date) : props.date;
  // 校验是否为合法日期实例
  const isValidDate = parsedDate instanceof Date && !isNaN(parsedDate.getTime());

  const month = isValidDate ? parsedDate.toLocaleString('en-US', { month: 'long' }) : '未知月份';
  const day = isValidDate ? parsedDate.toLocaleString('en-US', { day: '2-digit' }) : '00';
  const year = isValidDate ? parsedDate.getFullYear() : '未知年份';

  return (
    <div className='expense-item'>
      <div>
        <div>{month}</div>
        <div>{year}</div>
        <div>{day}</div>
      </div>
      <div className='expense-item__description'>
        <h2>{props.title}</h2>
        <div className='expense-item__price'>${props.amount}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

• 第二步：检查父组件传参逻辑
  上述代码已经自动兼容字符串、时间戳格式的日期输入，就算父组件未传递date属性也会展示兜底内容不会报错。你也可以选择直接在父组件传参时统一转成Date实例，示例如下：

// 父组件内调用ExpenseItem的示例
<ExpenseItem
  date={new Date('2024-05-20')}
  title="机械键盘"
  amount={199}
/>

内容的提问来源于stack exchange，提问作者h.m.p.frontendDeveloper