1

我正在尝试构建一个 React/Redux 应用程序，我是一个初学者。我想使用 React Sortable HOC 来获得一个可重新排列的列表，但我无法坚持新的安排。我有一个功能组件，可以在其中获取项目列表。项目结构是这样的：项目 [ {name, courseList}, {name, courseList}, ...]。

为了填充表格，我进行了 api 调用并使用 MapStateToProps 更新了 prop 变量。这是一段代码：

function CoursesPage({
  student,
  studentCourses,
  loadStudentCourses,
  updateCoursesOrder,
  ...props
}) {
  useEffect(() => {
    if (studentCourses.length === 0) {
      loadStudentCourses(student.id).catch((error) => {
        alert("Loading student courses failed" + error);
      });
    }
  }, []);
...
}

这是 mapStateToProps 函数：

function mapStateToProps(state) {
  return {
    student: state.student,
    studentCourses: state.studentCourses,
  };
}

这一点工作正常，一切都出现了。问题是当我尝试重新排列并将其保存在 onSortEnd 函数中时：

  function onSortEnd({ oldIndex, newIndex, collection }) {
    const newCollections = [...studentCourses];

    newCollections[collection].courseList = arrayMove(
      newCollections[collection].courseList,
      oldIndex,
      newIndex
    );

    updateCoursesOrder(newCollections);
  }

newCollection 被正确填充和修改，我正在调用 updateCoursesOrder 并正确排列项目。该函数是一个调用调度的动作。

export function updateCoursesOrder(courseList) {
  return function (dispatch) {
    dispatch(setNewCourseOrderSuccess(courseList));
  };
}

export function setNewCourseOrderSuccess(studentCourses) {
  return { type: types.SET_NEW_COURSE_ORDER, studentCourses };
}

使用调试器，我可以看到代码运行良好，直到从 setNewCourseOrderSuccess() 调度返回。

这应该转到减速器，但会引发错误：未捕获的不变违规：在调度之间检测到状态突变。

这是减速器的样子：

export default function courseReducer(
  state = initialState.studentCourses,
  action
) {
  switch (action.type) {
    case type.LOAD_STUDENT_COURSES_SUCCESS:
      return action.studentCourses;
    case type.SET_NEW_COURSE_ORDER:
      return {
        ...state,
        studentCourses: action.payload,
      };
    default:
      return state;
  }
}

我该如何解决这个问题？非常感谢你！

4

1 回答 1

0

有了这个：

const newCollections = [...studentCourses];

newCollections[collection].courseList =

虽然newCollections是一个新数组，但它只是 ; 的浅拷贝studentCourses。数组项不是克隆，它们是对当前状态对象的引用。因此，分配给courseList这些对象之一的属性正在改变状态。

替换索引处的对象而不是改变它：

function onSortEnd({ oldIndex, newIndex, collection }) {
    updateCoursesOrder(studentCourses.map((item, i) => i !== collection ? item : ({
        ...item,
        courseList: arrayMove(item.courseList, oldIndex, newIndex)
    })));
}
于 2021-01-17T16:32:40.340 回答