Reactjs 尝试保留原始阵列（克隆、响应）

我正在制作一个菜单应用程序，人们可以在其中过滤食物和饮料。它分为多个类别，类别包含项目。其中一个特性是“酒精”->饮料是否含有酒精

我有一个包含两个数组的状态对象：一个“原始”数组（包含所有项）和一个“过滤器”数组（过滤发生的地方）

每次更改过滤器时，我都希望复制原始阵列并重新开始过滤。但似乎在过滤一次之后，原始数组发生了变化，这很奇怪，因为我克隆了数组

我的代码：

const [arrays, setArrays] = useState({
  original: [{ catName: 'drinks', items: [{},{},...]}],
  filter: [] // same as original in the beginning
});

useEffect(() => {
  const copy = [...arrays.original];
  copy.forEach((cat, idx) => {
    if (!filter.alcohol) {
      copy[idx].items = cat.items.filter(e => e.properties.alcohol === false);
    }
  });
  setArrays(p => ({
    ...p,
    filter: copy
  });
}, [filter]);

我从不“触摸”原始数组，但在过滤器更改后，不仅“过滤器”-数组会更改（如预期），而且原始数组也会更改

编辑：预期行为：

---

当我过滤酒精时，我希望所有含酒精的饮料都从过滤器阵列中移除。这是可行的，但当我取下过滤器时，所有的酒精饮料都应该回到过滤器阵列中。这不起作用，因为它们也从原始数组中删除。

听起来您可能只是返回了原始数组的浅拷贝。您尝试过Lodash的clonedeep吗？

您知道javascript中的对象是通过引用传递的吗？这就是你正在做的。创建一个新数组，但使用与原始数组中相同的对象的引用填充该数组。你要寻找的是一个深度副本。你不复制数组，而是复制包含数组的对象，然后对它们进行迭代。您需要克隆副本中的每个阵列。forEach感谢您的回答。我如何执行深度复制？不用担心，我已经找到了。洛达斯的深度克隆成功了！谢谢你的帮助。