在 mobx-persist 中重新水化树结构的问题答案

【问题标题】：Problem with rehydrating a tree structure in mobx-persist在 mobx-persist 中重新水化树结构的问题
【发布时间】：2023-03-07 22:22:01
【问题描述】：

我在为包含由 TreeNode 对象组成的树数据结构的商店补水时遇到问题。我正在使用以下库： https://github.com/pinqy520/mobx-persist

问题是实例作为对象而不是 TreeNodes 被水合。我的猜测是（在阅读https://github.com/pinqy520/mobx-persist/issues/25 之后）我不能在类本身中使用类定义来持久化，但我不确定这是否真的是原因。

这就是我的 TreeNode 类：

export default class TreeNode {

    @persist id = Math.random();
    @persist @observable title = "Root";
    @persist @observable collapsed = false; // if node should be shown opened
    @persist('list', TreeNode) @observable childNodes  = []; // <- should this work?
    ...

欢迎任何提示！

【问题讨论】：

标签： reactjs mobx mobx-persist

【解决方案1】：

我认为问题在于 TreeNode 类不可序列化，并认为 Mobx 具有 @serializable 装饰器。由于自引用装饰器在 Babel 5.x 和 Typescript 中工作，因此您可能可以执行以下操作：

@persist @serializable(list(object(TreeNode))) @observable childNodes = [];

或者可能没有@persist，我没有测试过

【讨论】：