试图从嵌套的 redux object 中删除所有项目并添加传入项目

Question

我有低于减速器和低于初始 State。 classinfo 是父 state，它有一个嵌套的 state 学生数组。 使用以下减速器，我计划（用新学生替换以前的学生）从以前的 state 中删除所有学生，从“action.data.students”添加新学生并返回一个新的 state。 第一次添加学生时没有问题，当我添加另一个学生时，我收到错误“在调度之间检测到 state 突变”请告诉我，我做错了什么。

classInfo[ { Id:"", students:[] }]

function sampleReducer(state = initialState.classInfo, action) {
  switch (action.type) {
    case types.ADD_CLASSROOMS:
      return [...state, ...action.data];
    case types.REMOVE_CLASSROOMS:
      return state.filter((class) => class.id !== action.data);
    case types.ADD_STUDENT_DETAILS:
      const stateObj = state.map((class, i) => {
        if (class.id === action.data.id) {
          return {
            ...class,
            students: {
              ...action.data.students,
            },
          };
        }
        return {
          ...class,
        };


      });
      return stateObj;

    default:
      return state;
  }
}

Answer 1

您正在为students传播 object 。 这是一个数组。 所以使用方括号并传播学生数组 - students: [...action.data.students]

...
case types.ADD_STUDENT_DETAILS:
      const stateObj = state.map((class, i) => {
        if (class.id === action.data.id) {
          return {
            ...class,
            students: [ //<----use square brackets(as its an array)
              ...action.data.students
            ],
          };
        }
        return class;


      });
      return stateObj;
    ...

Answer 2

你做得很好， do not to mutate the state只是意味着不要改变prevState只需更新 state。

主要错误是，您正在尝试更改学生的 state，因为它以前是array类型，而在更新它时，您将其设置为object类型只是一个错字。 请使用 [ ] 而不是 { }

 const state = { id: 1, students: [ {first: 1}, {second: 2}, {third: 3} ] } const action = { data: { students: [ {fourth: 4} ] } } const updatedStudents = {...action.data.students } console.log(state); console.log(updatedStudents);

所以，在你的情况下->

case types.ADD_STUDENT_DETAILS:
      const stateObj = state.map((class, i) => {
        if (class.id === action.data.id) {
          return {
            ...class,
            students: [
              ...action.data.students,
            ],
          };
        }
        return {
          ...class,
        };


      });
      return stateObj;