使用React Context API时如何将标签数组添加到对应ID的学生对象中

方法1：新增标签时同步更新students数组（修改reducer逻辑） #

你当前的reducer仅更新了tags数组，要同步更新对应学生的标签，需要在ADD_TAG分支中遍历students数组，匹配到对应id的学生后新增/更新其tags属性，全程遵循不可变更新规则即可：

case ADD_TAG:
  const newTag = action.payload;
  // 遍历更新students数组，找到匹配studentId的项添加标签
  const updatedStudents = state.students.map(student => {
    if (student.id === newTag.studentId) {
      return {
        ...student,
        // 如果学生已有tags属性就追加，没有就初始化新数组
        tags: [...(student.tags || []), newTag.tag]
      }
    }
    return student;
  })

  return {
    ...state,
    tags: [...state.tags, newTag],
    students: updatedStudents // 替换为更新后的students数组
  }

方法2：初始加载数据时批量聚合tags到students #

如果你需要在第一次获取students、tags数据时，就把所有历史标签批量添加到对应学生中，可以在获取数据后、初始化state前做一次聚合：

// 假设你从接口拿到了rawStudents和rawTags两个数组
const aggregatedStudents = rawStudents.map(student => {
  // 过滤出当前学生对应的所有标签
  const matchTags = rawTags.filter(tag => tag.studentId === student.id).map(item => item.tag);
  return {
    ...student,
    tags: matchTags
  }
})
// 再把aggregatedStudents作为初始值传入state的students字段即可

• 注意你给出的students数据格式存在语法错误：colors字段用数组包裹了对象键值对，实际应该把colors设为对象类型，否则代码运行会报错。

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