如何应用不同类型的快照？答案

【问题标题】：How can I apply a snapshot with a different type?如何应用不同类型的快照？
【发布时间】：2019-10-30 16:39:35
【问题描述】：

我在我的应用程序中使用了不同类型的“Todo”模型。这些类型是通过一个名为“type”的字段实现的。

const BaseTodo = types
  .model("BaseTodo", {
    id: types.optional(types.number, () => Math.random()),
    title: types.string,
    finished: false,
    type: types.string
  })
  .actions(self => ({
    toggle() {
      self.finished = !self.finished;
    },
    changeToShoppingType() {
      const snap = getSnapshot(self);
      console.log("snapshot: ", snap);
      const newSnap = {};
      Object.assign(newSnap, snap, { type: "shopping" });

      console.log("newSnap: ", newSnap);
      applySnapshot(self, newSnap);
      console.log("after apply snap: ", self);
    }
  }));

const ShoppingTodo = BaseTodo.named("ShoppingTodo").props({
  type: types.literal("shopping")
});

const CleaningTodo = BaseTodo.named("CleaningTodo").props({
  type: types.literal("cleaning")
});

export const Todo = types.union(ShoppingTodo, CleaningTodo);

export const TodoStore = types
  .model("TodoStore", {
    todos: types.array(Todo)
  });

我的问题：当我想通过对我的对象应用快照将我的步骤类型从“清洁”更改为“购物”时，我收到了错误：

...路径“/type”的值“shopping”不可分配给类型：“cleaning”

任何提示如何实现我的用例？

我创建了一个代码框示例，说明我想如何更改类型（只需单击按钮）： https://dm71z.csb.app/

很遗憾，我无法在控制台中显示错误。

【问题讨论】：

标签： javascript mobx-state-tree

【解决方案1】：

我认为不可能直接改变孩子的类型，因为你本质上需要一个新的模型实例，因此 todos 数组也必须更新它的引用。

所以，你需要做的是让 TodoStore 替换 todo：

export const TodoStore = types
  .model("TodoStore", {
    todos: types.array(Todo),
  })
  .actions(self => ({
    changeToShoppingType: (todo) => {
      const snap = getSnapshot(todo);
      console.log("snapshot: ", snap);
      const newSnap = {};
      Object.assign(newSnap, snap, { type: "shopping" });

      console.log("newSnap: ", newSnap);
      self.todos.splice(self.todos.indexOf(todo), 1, newSnap);
    }
  }));

检查这个例子https://codesandbox.io/s/simple-mobx-todolist-m8bre?fontsize=14。

【讨论】：