React中ExpenseDate.js的getFullYear()未定义错误修复求助

错误原因 #

这个错误的核心是传给ExpenseDate组件的date props为undefined，导致调用props.date.getFullYear()时触发属性读取错误。你尝试的new Date.getFullYear()写法本身就不正确（正确写法是new Date().getFullYear()），但这只是临时默认值的写法，根本问题还是date props没有正确传递。

修复步骤与代码示例 #

1. 修复ExpenseDate.js：添加防御性检查 + 正确默认值处理 #

修改组件代码，先判断props.date是否有效，无效时用当前日期作为 fallback，避免报错：

import './ExpenseDate.css';

function ExpenseDate(props) {
  // 优先使用传入的有效Date对象，否则用当前日期
  const expenseDate = props.date instanceof Date ? props.date : new Date();
  
  const year = expenseDate.getFullYear();
  const month = expenseDate.toLocaleString('en-US', { month: 'long' });
  const day = expenseDate.toLocaleString('en-US', { day: '2-digit' });

  return (
    <div className="expense-date">
      <div className="expense-date__year">{year}</div>
      <div className="expense-date__month">{month}</div>
      <div className="expense-date__day">{day}</div>
    </div>
  );
}

export default ExpenseDate;

2. 检查父组件（如Expenses.js）中ExpenseDate的调用 #

确保在父组件中正确传递date props，且传递的值是有效的Date对象：

import ExpenseDate from './ExpenseDate';
import './ExpenseItem.css';

function ExpenseItem(props) {
  // 将传入的日期数据转换为Date对象（兼容字符串格式）
  const expenseDate = typeof props.expense.date === 'string' 
    ? new Date(props.expense.date) 
    : props.expense.date;

  return (
    <div className="expense-item">
      {/* 正确传递date props */}
      <ExpenseDate date={expenseDate} />
      <div className="expense-item__description">
        <h2>{props.expense.title}</h2>
        <div className="expense-item__price">${props.expense.amount}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

3. 确保顶层组件（如App.js）数据流正确 #

检查App.js中传递给Expenses组件的 expense 数据是否包含有效的日期字段：

import Expenses from './Expenses';

function App() {
  // 示例数据：支持Date对象或可解析的日期字符串
  const expenses = [
    {
      id: 'e1',
      title: 'Toilet Paper',
      amount: 94.12,
      date: new Date(2020, 7, 14),
    },
    {
      id: 'e2',
      title: 'New TV',
      amount: 799.49,
      date: '2021-02-12',
    },
  ];

  return (
    <div>
      <h2>Let's get started!</h2>
      <Expenses items={expenses} />
    </div>
  );
}

export default App;

额外优化建议 #

• 如果日期数据来自用户输入（如ExpenseForm.js），提交时务必将输入的日期字符串转换为Date对象再传递。
• 可以用PropTypes添加类型检查，提前发现props传递错误：

  import PropTypes from 'prop-types';
  
  ExpenseDate.propTypes = {
    date: PropTypes.instanceOf(Date),
  };
  
  // 设置默认props
  ExpenseDate.defaultProps = {
    date: new Date(),
  };
  

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