在调度之间检测到状态突变但我没有突变状态

Question

我知道之前已经问过这个问题，但几乎所有人都在谈论OP直接改变状态，我试图避免使用像扩展运算符这样的技术（在对象和数组中），但尽管如此我得到以下错误：

Uncaught Error: A state mutation was detected between dispatches, in the path `courses.0`. This may cause incorrect behavior. (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments)
  at invariant (eval at <anonymous> (bundle.js:922), <anonymous>:40:15)
  at eval (eval at <anonymous> (bundle.js:3825), <anonymous>:50:36)
  at eval (eval at <anonymous> (bundle.js:3846), <anonymous>:14:16)
  at dispatch (eval at <anonymous> (bundle.js:3853), <anonymous>:37:18)
  at eval (eval at <anonymous> (bundle.js:1151), <anonymous>:63:5)
  at eval (eval at <anonymous> (bundle.js:3846), <anonymous>:11:18)
  at Object.eval [as saveCourse] (eval at <anonymous> (bundle.js:3860), <anonymous>:4:12)
  at Object.ManageCoursePage._this.saveCourse [as onSave] (eval at <anonymous> (bundle.js:2080), <anonymous>:134:27)
  at CourseForm._this.onHandleSave (eval at <anonymous> (bundle.js:2052), <anonymous>:93:19)
  at Object.ReactErrorUtils.invokeGuardedCallback (eval at <anonymous> (bundle.js:1301), <anonymous>:69:16)

我读了错误指向的文章，因为它建议我检查我是否在我的reducer中手动改变状态，我看不到可能发生的地方：

const courseReducer = (state = initialState.courses, action) => {
  switch (action.type) {
    case types.LOAD_COURSE_SUCCESS:
      return action.courses;
    case types.CREATE_COURSE_SUCCESS:
    //This action throw the error 
      debugger;      
      return [
        ...state,
        Object.assign({}, action.course)
      ];
    case types.UPDATE_COURSE_SUCCESS:
     //This action throw the error
      debugger;
      return [
        ...state.filter(course => course.id !== action.course.id),
        Object.assign({}, action.course)
      ];
    case types.DELETE_COURSE_SUCCESS:
      return [...state.filter(course => course.id !== action.courseId)];
    default:
      return state;
  }
};

这是一个沙盒，其中包含可用于复制错误的应用程序的一部分 ，奇怪的是，这种情况只会在我创建新课程或尝试编辑现有课程时发生（在我的courseReducer分别执行CREATE_COURSE_SUCCESS和UPDATE_COURSE_SUCCESS操作）

我真的很感激，如果有人能帮我弄清楚哪里可能是这个错误的根源。

Answer 1

问题是，你是变异状态，里面CoursesPage.js ，在mapStateToProps ：

let courses = state.courses.sort((c1, c2) =>
  c1.title.localeCompare(c2.title, 'en', { sensitivity: 'base' }),
);

Array#sort是一个就地操作 ，因此它通过对源数组进行排序来改变源数组。 这意味着， sort正在改变state.courses ，从而导致错误。 相反，在排序之前，请复制state.courses ：

[...state.courses]

上面使用扩展语法将元素分散到一个新的数组中，基本上克隆它。 这与Array#slice相同。 然后你可以这样排序：

let courses = [...state.courses].sort((c1, c2) =>
  c1.title.localeCompare(c2.title, 'en', { sensitivity: 'base' }),
);

这不会改变原始的state.courses并且不会抛出错误。

---

注：也有一些地方，你是变异this.state直接，如在第32行ManageCoursePage.js ，你这样做：

this.state.errors = {}

只有在组件的构造函数中改变this.state对象。 请改用setState 。