问题描述
我正在尝试根据年份(由用户选择)过滤元素列表,这是表单的图片:
默认情况下,“2020”是默认值,列表中的元素等于今年,但我没有得到这些元素或其他年份不同的元素。
这是我的代码:
import React,{ useState } from "react";
import "./Expenses.css";
import ExpenseItemV3 from "./ExpenseItemV3";
import Card from "../UI/Card";
import ExpenseFilter from "./NewExpense/ExpensesFilter";
const Expenses = (props) => {
const [filteredYear,setFilteredYear] = useState("2020");
const filterChangeHandler = (selectedYear) => {
setFilteredYear(selectedYear);
console.log("Expenses.js received this value: ");
console.log(selectedYear);
};
return (
<div>
<Card className="expenses">
<ExpenseFilter
selected={filteredYear}
onChangeFilter={filterChangeHandler}
/>
{props.records
.filter((expense) => expense.date.getFullYear() === filteredYear)
.map((filteredExpense) => (
<ExpenseItemV3
key={filteredExpense.id}
title={filteredExpense.title}
amount={filteredExpense.amount}
date={filteredExpense.date}
/>
))}
</Card>
</div>
);
};
export default Expenses;
我被卡住的那一行是:
{props.records
.filter((expense) => expense.date.getFullYear() === filteredYear)
.map((filteredExpense) => (
<ExpenseItemV3
key={filteredExpense.id}
title={filteredExpense.title}
amount={filteredExpense.amount}
date={filteredExpense.date}
/>
))}
所以,我不知道为了过滤列表(props.records)我错过了什么;任何提示将不胜感激
非常感谢
解决方法
三个等号不仅意味着值,而且数据类型必须相同。您能确认费用.date.getFullYear() 通过 console.log(typeof费用.date.getFullYear()) 返回字符串类型吗?因为我很确定 getFullYear() 返回的是数字而不是字符串。所以你必须做费用.date.getFullYear().toString() ===filteredYear,因为你的filteredYear被设置为一个值为2020的字符串类型——Lith 26