Question

未捕获的类型错误：yearsList 未定义

2022-02-01

130

javascript reactjs

我正在尝试在 React 项目中编写一段 JavaScript 代码。我有一个组件“expenses”，它通过 props 传递了一些数据。数据是一些对象的数组。这是我的代码：数据：

const EXPENSES = [
  { id: "e1", date: "March 2021 12", description: "New TV", price: "$780" },
  { id: "e2", date: "April 2020 19", description: "basket", price: "$860" },
  { id: "e3", date: "June 2021 08", description: "Laptop", price: "$59" },
];

以及我的费用组件内部：

const yearsList = props.data.map((item) => item.date.split(" ")[1]);
  console.log(yearsList); //it prints ["2021" , "2020" , 2021] as expected

  const finalYearsList = (yearsList) => {
    var temp = [];
    var j = 0;
    for (let i = 0; i < yearsList.length; i++) { //this line: Uncaught TypeError: yearsList is undefined
      if (temp.includes(yearsList[i])) {
        continue;
      } else {
        temp[j++] = yearsList[i];
      }
    }
    return temp.sort();
  };

我想将所有非重复年份都放在 finalYearList const 中，但它在控制台中给出了错误 Uncaught TypeError: yearsList 未定义。我对 JavaScript 世界有点陌生。提前谢谢您。

Answer 1

您正在使用第 4 行中的参数 yearsList 来隐藏第 1 行中声明的 yearsList 变量。

您可以通过两种方式更改代码：

删除第 4 行中的参数，这样您的函数声明就是

const finalYearsList = () => {
  ...
}

在调用函数 finalYearsList 时，将 yearsList 作为参数传入>

const yearsList = props.data.map( ... );

const finalYearsList = (yearsList) => {
  ...
}

finalYearsList(yearsList);

如果您选择选项 2，我建议您重命名变量或参数，并完全避免这种隐藏，因为它会造成混淆（如您所见）。

Answer 2

如果您想在函数 finalYearsList 中使用 yearsList，则不必将其作为参数传递。在当前代码中，您声明了一个名为 yearsList 的参数，从而覆盖了原始 yearsList。

您的原始 yearsList 是在全局范围内定义的，因此可在每个函数内访问！

因此只需使用...

const yearsList = props.data.map((item) => item.date.split(" ")[1]);
  console.log(yearsList); //it prints ["2021" , "2020" , 2021] as expected

  const finalYearsList = () => {
    var temp = [];
    var j = 0;
    for (let i = 0; i < yearsList.length; i++) { //this line: Uncaught TypeError: yearsList is undefined
      if (temp.includes(yearsList[i])) {
        continue;
      } else {
        temp[j++] = yearsList[i];
      }
    }
    return temp.sort();
  };

...即可。