Immer 不更新属性答案

【问题标题】：Immer not updating the propertyImmer 不更新属性
【发布时间】：2021-12-09 16:01:30
【问题描述】：

我将 Redux 与 Immer 一起使用。到目前为止，这是我的代码：

clearMachineState(state, { payload }: ClearMachineStatePayload) {
  const childrenIds = payload.children.map((child) => child.id);
  const newMachines = typedMachineState.machine_state.machines.flatMap((machine) => {
    const tmpMachines: MachineMapping[] = [];
    childrenIds.forEach((id) => {
      console.log(id, machine.machine_id);
      if (id !== machine.machine_id) {
        const foundMachine = tmpMachines.find(
          (tmpMachine) => tmpMachine.machine_id === machine.machine_id,
        );
        if (!foundMachine) {
          tmpMachines.push(machine);
        }
      }
    });
    console.log({ tmpMachines });
    return tmpMachines;
  });
  console.log({ newMachines });
  state.machine_state.machines = newMachines;
}

我想从state.machine_state.machines 中删除这些机器，它们存在于payload.children 中。问题是，当我在 TS 中使用上面的代码时，一切似乎都很好，但是当我登录 {tmpMachines} 时，我看到了这个：

Object { tmpMachines: (1) […
tmpMachines: Array [ Proxy ]
0: Proxy { <target>: null, <handler>: null }
length: 1
<prototype>: Array []
<prototype>: Object { … }

但是如果我使用模拟数组，像这样：

const newMachines = typedMachineState.machine_state.machines.flatMap((machine) => {...

我得到了实际的对象。

但无论哪种方式，state.machine_state.machines = newMachines; 分配都不会发生。如果我尝试执行state.machine_state.machines = [];，它确实如此，但不是针对我创建的数组。

我还想映射状态，而不是外部源。

我错过了什么？

【问题讨论】：

标签： javascript reactjs typescript react-redux immer.js

【解决方案1】：

这不是一个更深层次的问题。这是一个逻辑问题。这是工作代码：

clearMachineState(state, { payload }: ClearMachineStatePayload) {
  const childrenIds = payload.children.map((child) => child.id);
  const newMachines: MachineMapping[] = [];
  typedMachineState.machine_state.machines.forEach((machine) => {
    if (!childrenIds.includes(machine.machine_id)) {
      newMachines.push(machine);
    }
  });
  state.machine_state.machines = newMachines;
},

【讨论】：