React费用追踪器添加新费用时filter函数报错求助

问题根源 #

HTML的type="date"输入框返回的是字符串格式（例如"2024-05-20"），你在handleFormSubmit中直接将inputDate赋值给新费用的date字段，没有转换成Date对象。而原始DUMMY_EXPENSES里的date都是new Date()创建的实例，能正常调用getFullYear()方法，但新添加的费用date是字符串，自然没有该方法，导致过滤时抛出错误。

修复步骤 #

1. 转换日期字符串为Date对象 #

修改handleFormSubmit中的newExpense对象，将inputDate转为Date实例，同时把金额字符串转为数字类型（避免后续渲染/计算异常）：

const newExpense = {
  title: inputTitle,
  date: new Date(inputDate), // 转换为Date对象
  amount: parseFloat(amount), // 转换为数字
  id: Math.floor(Math.random() * 100000),
};

2. 提交后清空表单输入 #

提交完成后重置输入状态，提升用户体验：

const handleFormSubmit = (e) => {
  e.preventDefault();

  const newExpense = {
    title: inputTitle,
    date: new Date(inputDate),
    amount: parseFloat(amount),
    id: Math.floor(Math.random() * 100000),
  };

  setExpenses((prevExpense) => [newExpense, ...prevExpense]);
  
  // 清空输入框
  setInputTitle("");
  setInputDate("");
  setAmount("");
  // 可选：提交后自动隐藏表单
  setIsEditing(false);
};

3. 边界情况校验（可选） #

若用户未填写完整信息就提交，可添加简单校验避免无效数据：

const handleFormSubmit = (e) => {
  e.preventDefault();

  if (!inputTitle || !inputDate || !amount) {
    alert("请填写完整的费用信息");
    return;
  }

  const newExpense = {
    title: inputTitle,
    date: new Date(inputDate),
    amount: parseFloat(amount),
    id: Math.floor(Math.random() * 100000),
  };

  setExpenses((prevExpense) => [newExpense, ...prevExpense]);
  setInputTitle("");
  setInputDate("");
  setAmount("");
  setIsEditing(false);
};

额外优化建议 #

• 金额输入框添加限制，确保输入合法数值：

<input
  type="number"
  onChange={handleAmountChange}
  value={amount}
  step="0.01" // 限制两位小数
  min="0" // 禁止负数
/>

• 用更可靠的方式生成ID，避免重复：

id: crypto.randomUUID(), // 现代浏览器支持，替代Math.random()

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