第 18:54 行：“filteredYear”未定义 no-undef答案

【问题标题】：Line 18:54: 'filteredYear' is not defined no-undef第 18:54 行：“filteredYear”未定义 no-undef
【发布时间】：2022-01-19 16:55:43
【问题描述】：

我有一个来自我正在学习的 udemy 课程的反应组件，但它停止工作，我不知道为什么？

我现在明白了

src/components/Expenses/Expenses.js
  Line 18:54:  'filteredYear' is not defined  no-undef

Search for the keywords to learn more about each error.

“搜索关键字”是什么意思？

这些是我查找时的结果以及它的含义

search list for keywords in react

How to filter or search an array of objects in React?

这不是完全相同的上下文吗？

这是我的代码

import React, { useState } from 'react';

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

function Expenses(props) {

  const [pickedYear, setPickedYear] = useState('2020')

  const selectedFilterYear = (filteredYear) => {
    console.log('the selected filtered year is: ' + filteredYear)
    setPickedYear(filteredYear);
  }

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

  return(
    <div>
      <Card className="expenses">
        <ExpensesFilter selected={pickedYear} onFilterYear={selectedFilterYear} />
        {filteredExpenses.map(expense => 
          <ExpenseItem
            key={expense.id}
            title={expense.title} 
            amount={expense.amount} 
            date={expense.date} 
          />
        )}
      </Card>
    </div>
  )
}

export default Expenses;

你如何解决这个问题？我还需要寻找其他上下文吗？你不能使用论点或其他东西吗？这里很困惑。

【问题讨论】：

标签： reactjs

【解决方案1】：

我认为您只是打错了：您将状态变量命名为 pickedYear，但似乎您稍后将其称为 filteredYear。

至于“搜索关键字”消息，这是来自eslint。 Eslint 的所有规则都使用“关键字”。正在触发的 eslint 规则是

no-undef

搜索此内容会显示有关此特定规则 (https://eslint.org/docs/rules/no-undef) 的相关 eslint 文档，但您可能不需要完整的文档来显示问题所在，因为此规则比 eslint 的其他一些规则更直接.

错误消息准确地告诉您它所说的内容：第 18 行的 filteredYear 未定义。您定义filteredYear 的唯一位置是在您的selectedFilterYear 函数中，该函数将其定义为它接受的唯一参数。

要解决这个问题，只需使用您已经设置的相同状态变量：

// Here you name your piece of state `pickedYear`
const [pickedYear, setPickedYear] = useState('2020');

const filteredExpenses = props.items.filter(expense => {
    // So refer to that same `pickedYear` variable here ?
    return expense.date.getFullYear().toString() === pickedYear;
});

【讨论】：