根据用户选择的标准过滤列表

Question

我正在尝试根据年份（由用户选择）过滤元素列表，这是表格的图片：

默认情况下，“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)；任何提示将不胜感激

非常感谢

Answer 1

三个等号不仅意味着值而且数据类型必须相同。您能否通过 console.log(typeof expense.date.getFullYear()) 确认 expense.date.getFullYear() returns 是一个字符串类型，因为我很确定 getFullYear() returns 是一个数字不是字符串。所以你必须做 expense.date.getFullYear().toString() === filteredYear 因为你的 filteredYear 被设置为字符串类型的值 2020 – Lith 26

根据用户选择的标准过滤列表

filtering a list based on criteria selected by the user

jsx

reactjs

conditional-rendering