根据用户选择的条件过滤列表

Posted 2023-02-22

【中文标题】根据用户选择的条件过滤列表

【英文标题】：filtering a list based on criteria selected by the user

【发布时间】：2021-09-02 18:13:07

【问题描述】：

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

默认情况下，“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）而遗漏了什么；任何提示将不胜感激

非常感谢

【问题讨论】：

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

绝对，你是对的，非常感谢代码和概念中的指导。最好的愿望

【参考方案1】：

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