使用setState更新对象数组内指定对象的数组变量时遇map报错

问题根源 #

你的代码里存在一个关键错误：obj.subjects.push(subject)返回的是数组的新长度（数字类型），而非更新后的数组。这会导致匹配到的部门对象中，subjects属性被替换成数字，后续调用map方法时自然报错——数字没有map方法。同时这也是鼠标悬停时subjects显示never[]类型的原因，类型被错误覆盖了。

修复代码 #

将addSubjectToDepartment函数中的push替换为扩展运算符创建新数组，保持状态更新的不可变性：

const addSubjectToDepartment = (id) => {
    var updatedDepartments = departments.map((obj, index) => {
      if(index == id) {
        return {
          ...obj,
          // 用扩展运算符创建新数组，添加新科目，避免修改原数组
          subjects: [...obj.subjects, subject]
        }
      }
      return obj;
    })

    setDepartments(updatedDepartments);
}

额外说明 #

• React状态更新要求不可变操作，不能直接修改原数组/对象，必须返回新的引用才能触发组件重新渲染。push是直接修改原数组的方法，不符合要求；而扩展运算符[...arr, newItem]会创建全新数组，既保留原数据，又添加了新元素。
• 如果使用TypeScript，要确保subject变量的类型和departments中subjects数组的元素类型一致，以此解决never[]的类型提示问题。

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