这段代码是否产生Mutation？能否改写为无Mutation版本？

首先纠正你对filter的误解：它不是Mutation操作。filter会返回一个全新的数组，原数组package[key]不会被任何修改；同理，[...package[key], value]也是生成新数组，原数组保持原样。你代码里的数组操作本身就是无Mutation的。

针对你的问题逐一说明：

1. 仅用const newPackage = {...package}能否解决问题？ #

不够。{...package}只是对原对象做浅拷贝，package[key]对应的数组还是原来的引用。如果你的状态是整个package对象，正确的做法是在拷贝对象的同时，把目标key替换为新生成的数组，确保整个对象和目标数组都是新引用：

function toggleFunction(key, value) {
  if (!package[key]) return;
  
  const updatedArray = package[key].includes(value)
    ? package[key].filter(v => v !== value)
    : [...package[key], value];
  // 创建全新对象，替换目标key为新数组，其余属性保留原对象的内容
  const newPackage = { ...package, [key]: updatedArray };
  // 假设callSetUseState需要接收完整的新对象（而非key和数组）
  callSetUseState(newPackage);
}

2. 对象复制能否避免Mutation副作用？ #

只要你始终通过创建新数组、新对象来更新状态，就完全能避免Mutation副作用。因为原对象和原数组都没有被修改，所有更新都是基于新的引用，不会出现意外修改原数据的情况。

3. 无Mutation的改写方式 #

上面的代码就是完全无Mutation的写法，所有操作都不触碰原数据，仅通过生成新的数组和对象来完成状态更新。如果需要更严谨，可以提前判断package[key]是否存在，避免后续逻辑报错。

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