过滤我的费用数组时出现问题

Question

我正在使用 React 制作一个简单的费用跟踪器，我的所有功能目前都在应用程序组件中。 我过滤了费用数组以从所选年份中选择费用，并通过映射过滤后的数组将其呈现在 ul 和 li 标记下方。 但是在添加新的费用并选择日期时，我的应用程序在过滤器函数中记录了一个错误，即 expense.date.getFullYear() 不是一个函数，我无法弄清楚为什么，并且需要相同的帮助.

以下是我的应用程序的代码

`

import { useState } from "react";
import "./App.css";

// dummy expenses array
const DUMMY_EXPENSES = [
  {
    id: "e1",
    title: "Toilet Paper",
    amount: 94.12,
    date: new Date(2020, 7, 14),
  },
  { id: "e2", title: "New TV", amount: 799.49, date: new Date(2021, 2, 12) },
  {
    id: "e3",
    title: "Car Insurance",
    amount: 294.67,
    date: new Date(2021, 2, 28),
  },
  {
    id: "e4",
    title: "New Desk (Wooden)",
    amount: 450,
    date: new Date(2021, 5, 12),
  },
];

function App() {
  // state to store the expenses in an Array
  const [expenses, setExpenses] = useState(DUMMY_EXPENSES);

  // state to select filtered year
  const [filteredYear, setFilteredYear] = useState("2020");

  // state to check if form is being edited or not
  const [isEditing, setIsEditing] = useState(false);

  // states for inputs of form
  const [inputTitle, setInputTitle] = useState("");
  const [inputDate, setInputDate] = useState("");
  const [amount, setAmount] = useState("");

  // form input change functions
  const handleInputChange = (e) => {
    setInputTitle(e.target.value);
  };

  const handleDateChange = (e) => {
    setInputDate(e.target.value);
  };

  const handleAmountChange = (e) => {
    setAmount(e.target.value);
  };

  // form submit functionality
  const handleFormSubmit = (e) => {
    e.preventDefault();

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

    setExpenses((prevExpense) => {
      return [newExpense, ...prevExpense];
    });
  };

  const showForm = () => {
    setIsEditing(true);
  };

  const hideForm = () => {
    setIsEditing(false);
  };

  // handling the filtered year change
  const handleYearChange = (e) => {
    setFilteredYear(e.target.value);
  };

  // filtering the expenses array according to the filteredYear
  const filteredExpenses = expenses.filter((expense) => {
    return expense.date.getFullYear().toString() === filteredYear;
  });

  return (
    <div>
      {/* form for input of expense data */}
      {!isEditing && <button onClick={showForm}>Add Expense</button>}
      {isEditing && (
        <form onSubmit={handleFormSubmit}>
          <div className="new-expense__controls">
            <div className="new-expense__control">
              <label>Title</label>
              <input
                type="text"
                onChange={handleInputChange}
                value={inputTitle}
              />
            </div>
            <div className="new-expense__control">
              <label>Amount</label>
              <input
                type="number"
                onChange={handleAmountChange}
                value={amount}
              />
            </div>
            <div className="new-expense__control">
              <label>Date</label>
              <input
                type="date"
                onChange={handleDateChange}
                value={inputDate}
              />
            </div>
            <div className="new-expense__actions">
              <button type="button" onClick={hideForm}>
                Cancel
              </button>
              <button type="submit">Submit</button>
            </div>
          </div>
        </form>
      )}

      {/* filter by year functionality */}
      <div className="expenses-filter">
        <div className="expenses-filter__control">
          <label>Select Year</label>
          <select value={filteredYear} onChange={handleYearChange}>
            <option value="2023">2023</option>
            <option value="2022">2022</option>
            <option value="2021">2021</option>
            <option value="2020">2020</option>
            <option value="2019">2019</option>
          </select>
        </div>
      </div>

      {/* rendering the list of expenses */}
      {filteredExpenses.map((expense) => {
        return (
          <li key={expense.id}>
            <div className="expense-item">
              <div className="expense-date">
                <div className="expense-date__month">
                  {expense.date.toLocaleString("en", { month: "long" })}
                </div>
                <div className="expense-date__year">
                  {expense.date.getFullYear()}
                </div>
                <div className="expense-date__day">
                  {expense.date.toLocaleString("en", { day: "2-digit" })}
                </div>
              </div>
              <div className="expense-item__description">
                <h2>{expense.title}</h2>
                <div className="expense-item__price">${expense.amount}</div>
              </div>
            </div>
          </li>
        );
      })}
    </div>
  );
}

export default App;

`

Answer 1

如下更新新费用，原因，它不接受给定的日期作为日期对象，它看起来像字符串，因此需要先将其转换为 Date。

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