React调用SkillContext报cannot read properties of undefined:id错误如何解决

本次报错的核心原因是SkillContext的Provider传值写法不符合规范，导致Context未正确提供skillCard属性： #

1. 核心错误修复 #

你当前的SkillContext代码中，Provider的value属性使用了逗号运算符，JS中逗号运算符会返回最后一个表达式的值，也就是说你实际向Context提供的值只有deleteRecord，完全不存在需要的skillCard属性，所以解构时skillCard为undefined，读取id属性自然报错。

错误代码 #

// SkillContext.js 错误写法
<SkillContext.Provider
value={skillCard, updateRecord, insertRecord, deleteRecord}>
{children}
</SkillContext.Provider>

修复方案 #

将value改为对象格式，用花括号包裹所有要传递的属性：

// SkillContext.js 正确写法
<SkillContext.Provider
value={{skillCard, updateRecord, insertRecord, deleteRecord}}>
{children}
</SkillContext.Provider>

2. 其他潜在问题（不修复后续也会触发报错） #

• Courses组件的key属性错误 #

当前代码中遍历课程时写的key={skillCard.courses.id}存在问题，skillCard.courses是数组，不存在id属性，应该改为当前遍历项的id：

<Course {...course} level={level} key={course.id} />

• SkillAction组件未定义变量 #

组件内使用的handleEditClick、handleDeleteClick、idx三个变量均未定义，需要补充对应函数逻辑，或者将方法通过SkillContext传递、idx从父组件Skill传参进入。 #

验证方式 #

修复核心错误后，可以在SkillImage组件内加调试代码确认Context取值正常：

const contextValue = useContext(SkillContext)
console.log(contextValue) // 正常输出包含skillCard、updateRecord等属性的对象
const { skillCard: {id, skill} } = contextValue;

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