前端错误-null结构

让我分析一下当 data 为 null 时会发生什么。 Ran tool 当 data 为 null 时，让我逐行分析可能发生的错误：

这里：allClasses.current = data?.class_students || [];
- 如果 data 为 null，data?.class_students 会返回 undefined
- 由于使用了 || []，这里会被赋值为空数组 []
- 这行不会出错
这里：const { active, disable } = data?.class_students?.reduce(...)
- 如果 data 为 null，data?.class_students 为 undefined
- undefined?.reduce(...) 会返回 undefined
- 这会导致解构赋值错误 ：TypeError: Cannot destructure property 'active' of 'undefined' as it is undefined.

让我查看这个函数的完整上下文，确认我的分析： Read file: /Users/chenyao/myProjects/teacher-web/src/pages/SchoolManage/component/MistakeStudent/index.tsx Ran tool

分析结果

当 data 为 null 时，会在 第83行 发生错误：

具体错误：

javascript 复制代码

const { active, disable } = data?.class_students?.reduce(...)

如果 data 为 null，data?.class_students 返回 undefined
undefined?.reduce(...) 也返回 undefined

尝试从 undefined 中解构 { active, disable } 会抛出：

javascript 复制代码

TypeError: Cannot destructure property 'active' of 'undefined' as it is undefined.

为什么会出错：

可选链操作符 ?. 只是避免了在 null/undefined 上调用方法时的错误
但是 reduce 方法在 undefined 上调用时返回 undefined
解构赋值 const { active, disable } = undefined 会失败

修复建议：

javascript 复制代码

const { active, disable } = data?.class_students?.reduce(
  // ... reduce logic
) || { active: [], disable: [] };

或者更安全的写法：

javascript 复制代码

const classStudents = data?.class_students || [];
const { active, disable } = classStudents.reduce(
  // ... reduce logic
  { active: [], disable: [] }
);

这样即使 data 为 null，代码也能正常执行，active 和 disable 都会被初始化为空数组。