React报错TypeError: teachingExp.map is not a function的修复方法

TypeError: teachingExp.map is not a function 报错的本质是调用map方法时teachingExp已经不是数组类型。
对比两个模块的新增逻辑就能定位到错误点：

• 正常运行的学术经历模块，新增时正确用方括号包裹旧数组展开结果和新条目，始终保证academic状态是数组：

setAcademic([...academic, newAcademic]);

• 出问题的教学经历模块，addTeachingExp函数里更新状态时漏写了外层的方括号：

// 错误写法
setTeachingExp(...teachingExp, newTeachingExp);

这种写法相当于把旧数组展开后的元素、新对象挨个作为独立参数传给状态更新函数，React只会取第一个参数作为新的状态值——初始状态下旧数组展开的第一个元素是单个教学经历对象，直接把原本的数组状态覆盖成了普通对象，自然不存在数组原型上的map方法，点击新增就会触发报错。

修改addTeachingExp函数，给传入setTeachingExp的内容补上外层数组包裹，和学术经历模块的写法保持一致即可：

const addTeachingExp = () => {
  let newTeachingExp = {
    university: "",
    designation: "",
    period: "",
  };
  // 补上方括号，始终保证teachingExp是数组类型
  setTeachingExp([...teachingExp, newTeachingExp]);
};

你代码里还有两个不影响本次报错、但会导致功能异常的问题：

• 学术经历模块的状态里，完成年份字段定义的key是completionYear，但对应输入框的id写的是completedYear，会导致该输入框的内容无法正常同步到状态中，需要把两处字段名统一。
• 动态列表渲染不建议直接使用数组索引作为key值，后续如果涉及列表排序、频繁增删的场景，容易出现输入框内容错位的渲染问题，建议给每个条目生成唯一id作为key。

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