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

Question

我有低于减速器和低于初始状态。 classinfo 是具有嵌套学生状态数组的父状态。我计划使用以下减速器（用新学生替换以前的学生）从以前的状态中删除所有学生，从 "action.data.students" 和 return 添加新学生到一个新状态。我第一次添加学生时没有问题，当我添加另一个学生时出现错误 "A state mutation was detected between dispatches" 请让我知道我哪里做错了。

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 的对象。它是一个数组。所以使用方括号并展开学生数组 - 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只是更新状态。

主要错误是，您试图更改学生的状态，因为它以前是 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;

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

trying to remove all items and add incoming items from a nested redux object

javascript

reactjs

redux

react-redux

redux-reducers