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

Question

我有下面的减速器和下面的初始状态。classinfo是具有嵌套的学生状态数组的父状态。使用以下减缩器，我计划(用新学生替换以前的学生(从以前的状态中删除所有学生，从"action.data.students"中添加新学生，并返回新状态。我第一次添加学生时没有问题，当我添加另一个学生时，我得到了错误"在调度之间检测到状态突变"请告诉我，我哪里做错了。

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

你做得很好，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;

Answer 2

您正在为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;
...