TypeError：无法读取未定义的属性“getFullYear”（反应）

Question

Whenever I try adding a new element to the array I'm getting a TypeError: Cannot read property 'getFullYear' of undefined error hence why I'm not able to any new elements to the array

import React, { useState } from "react";

import ExpenseItem from "./ExpenseItem";
import Card from "../UI/Card";
import ExpensesFilter from "./ExpensesFilter";
import "./Expenses.css";

const Expenses = (props) => {
  const [filteredYear, setFilteredYear] = useState("2020");

  const filterChangeHandler = (selectedYear) => {
    setFilteredYear(selectedYear);
  };

  const filteredExpenses = props.items.filter(expense => {
    return expense.date.getFullYear().toString() === filteredYear;
  });

  return (
    <div>
      <Card className='expenses'>
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChangeHandler}
        />
        {filteredExpenses.map((expense) => ( 
          <ExpenseItem             
            title={expense.title} 
            amount={expense.amount}
            date={expense.date}
          />
        ))}
      </Card>
    </div>
  );
};

export default Expenses;

Answer 1

you would get this error if your new Date() id name doesn't corresponds what you have before you call your .getFullYear method

for example {id: a1, name: repair, amount:6000, dates: new Date(2021-10-24)} - if your object looks like this and your code is this

const filteredExpenses = props.items.filter(expense => {
return expense.date.getFullYear().toString() === filteredYear;

});

you would get this error because the id name is dates and your calling a method with date instead of dates

Answer 2

The error probably occurs on chrome, but not on firefox, right? If yes, this is because google removed the .date in chrome 16.

https://groups.google.com/a/chromium.org/g/chromium-html5/c/0aIsQuvfjuQ?pli=1