React useContext返回undefined 无法解构course属性问题求助

报错信息 #

Uncaught TypeError: Cannot destructure property 'course' of 'Object(...)(...)' as it is undefined.

问题排查方案 #

• 校验Context Provider的包裹范围
  确认调用useContext的组件处于对应Context Provider的子组件树内，不在Provider作用范围内的组件调用useContext只会返回createContext时传入的初始值，未设置初始值时就会返回undefined。
• 校验createContext的初始值结构
  如果业务场景允许组件脱离Provider使用，需要在创建Context时传入和Provider提供值结构完全一致的初始值，示例：

const CourseContext = createContext({
  course: {}
})

• 校验Provider的value传值结构
  检查Provider的value属性是否包含course字段，避免结构不匹配。常见错误是将value={{course: yourCourseData}}误写为value={yourCourseData}，导致外层缺失course属性。
• 校验Context导入路径
  确认组件内导入的Context实例和Provider使用的Context实例完全一致，避免因为路径写错、导入了错误的Context实例导致取值失败。

参考截图 #

内容的提问来源于stack exchange，提问作者Dominik Grabiec