javascript - 无法使过滤器与 Immer.js 一起使用以删除数组中的嵌套对象

Question

我开始使用 Immer.js 以实现 JS 中的不变性，但我找不到使用过滤器方法删除数组中对象的方法。它返回相同的对象。顺便说一句，我在 React 中使用状态来做这件事，但为了让它更直接，我编写了反射(reflect)我的问题的简单片段。

const sampleArr = [
      {
        items: [
          { slug: "prod1", qnty: 1 },
          { slug: "prod2", qnty: 3 },
          { slug: "prod3", qnty: 2 },
        ],
      },
    ];
    
    const newState = produce(sampleArr, (draft) => {
      draft[0].items.filter((item) => item.slug !== "prod1");
    });
    
    console.log(newState);

Console.log 应该给我相同的整个数组，但没有第一项。但是，我得到的是同一个数组，没有任何变化。

我用谷歌搜索并搜索了 immer 文档，但找不到我的答案。关于数组突变的 Immer.js 文档 => https://immerjs.github.io/immer/docs/update-patterns

观察。要在 chrome 开发工具上测试它，您可以复制粘贴 immer lib ( https://unpkg.com/immer@6.0.3/dist/immer.umd.production.min.js ) 并将生产方法更改为 immer.produce

Answer 1

使用解构来制作不可变对象(immutable对象)违背了 Immert。解决此问题的方法是将过滤后的部分重新分配给草稿。解决方案如下所示:

const sampleArr = [
  {
    items: [
      { slug: "prod1", qnty: 1 },
      { slug: "prod2", qnty: 3 },
      { slug: "prod3", qnty: 2 },
    ],
  },
];

const newState = produce(sampleArr, (draft) => {
  draft[0].items = draft[0].items.filter((item) => item.slug !== "prod1");
});

你可以在这里玩转repleit: https://replit.com/@GaborOttlik/stackoverflow-immer#index.js