过滤函数结果为未定义（useSelector）

Question

所以我有这行代码：

const { semesters, isLoading } = useSelector((state) => state.semester);

semesters 对象看起来像这样。

[
  {
    "isActive": true,
    "_id": "617aa8a3f2a712242c272d96",
    "acadYear": "A.Y. 2021- 2022, 2nd term",
    "__v": 0
  },
  {
    "isActive": false,
    "_id": "617aa91aa8f2aa2bc86422e9",
    "acadYear": "A.Y. 2025-2026, qweqwe",
    "__v": 0
  }
]

我正在尝试使用此代码在该数组中执行 filter/find 函数。

const filtered = semesters.filter(sem => sem.isActive !== false)[0].acadYear;

或

const getFind = semesters.find(sem => sem.isActive !== false).acadYear;

这两个都不适合我，我得到的错误是两个函数都未定义。我试过删除它并且没有错误。但是，当我尝试撤消它并且一旦它已经加载，它就会工作。问题是当我返回页面时，错误会再次发生。任何人都可以帮助我吗？提前致谢。

Answer 1

发生这种情况是因为在第一次渲染时，“学期”对象在 redux 存储中尚不可用。

您可以做的是使用可选的链接运算符 ?，以便 JavaScript 在尝试运行链接函数之前检查对象是否存在：

const filtered = semesters?.filter(sem => sem.isActive !== false)[0].acadYear;

这将 return undefined 并防止错误。一旦存储对象可用，您的 .filter 和 .find 函数将相应地运行。

还有其他解决方法。我只是觉得这个在大多数情况下更适合我的需求。

Answer 2

因为您正在使用 useSelector 从 Redux 中提取值，请确保 semesters 的默认值是空数组而不是 undefined（初始化默认值）。

Redux Docs: Initializing State

或者，您可以在执行时使用可选的链接运算符处理此问题：

const firstNotActive = semesters?.find(sem => sem.isActive !== false)?.acadYear;

过滤函数结果为未定义（useSelector）

Filter functions results to undefined (useSelector)

filter

find

reactjs

redux

react-redux