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

【问题标题】：Filter functions results to undefined (useSelector)过滤函数结果为未定义（useSelector）
【发布时间】：2021-12-13 18:51:37
【问题描述】：

所以我有这行代码：

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
  }
]

我正在尝试使用此代码在该数组中执行过滤/查找功能。

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

或

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

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

【问题讨论】：

标签： reactjs redux filter react-redux find

【解决方案1】：

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

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

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

这将返回undefined 并防止错误。一旦 store 对象可用，您的 .filter 和 .find 函数就会相应地运行。

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

【讨论】：

【解决方案2】：

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

Redux Docs: Initializing State

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

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

【讨论】：