React Toolkit中Slice的sortBy方法抛出Immer错误，如何解决？

错误根源 #

你遇到的Immer错误，核心原因是Array.sort()是原地修改数组的方法。你的sortBy reducer里，既返回了一个新的状态对象，又通过state.characters.sort()修改了原state中的数组（也就是Immer管理的draft对象），违反了Immer的规则：要么修改draft对象，要么返回全新的状态值，不能同时操作。

两种解决方式 #

方式1：返回新状态时避免修改原数组 #

先复制原数组，再对复制后的数组排序，这样不会触碰原draft数组：

sortBy: (state) => {
  return {
    ...state,
    // 用扩展运算符复制数组后再排序
    characters: [...state.characters].sort((a, b) => a.mass - b.mass),
  };
},

也可以用slice()方法复制数组，效果完全一致：

characters: state.characters.slice().sort((a, b) => a.mass - b.mass)

方式2：直接修改draft对象（Immer推荐写法） #

不返回新对象，直接修改state的characters属性，Immer会自动处理不可变更新：

sortBy: (state) => {
  // 复制数组后排序，再赋值给state.characters
  state.characters = [...state.characters].sort((a, b) => a.mass - b.mass);
},

内容的提问来源于stack exchange，提问作者Ry2254