前端错误-null结构

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

1. 这里：allClasses.current = data?.class_students || [];

   • 如果 data 为 null，data?.class_students 会返回 undefined
   • 由于使用了 || []，这里会被赋值为空数组 []
   • 这行不会出错

2. 这里：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行 发生错误：

具体错误：

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

• 如果 data 为 null，data?.class_students 返回 undefined

• undefined?.reduce(...) 也返回 undefined

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

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

为什么会出错：

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

修复建议：

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

或者更安全的写法：

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

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