Question

有一个带有observable.map的简化商店：

class ThStore {
    constructor() {
        this.store = mobx.observable.map({});
    }
}

mobx.decorate(ThStore, {
    _store: mobx.observable,
}

商店以这种格式（缩写）保存数据，它是一个JavaScript对象文字，由mobx作为observable.map管理。数据本身是用其id键控的项的集合，该项具有一些嵌套子集合，它们的格式相同：

 {
    "some-id": {
        id:"some-id",
        label:"some-value",
        childs: {
             "child-id": {...some properties},
             "other-child-id": {...some properties},
        }
    },
    "other-id": {
        id:"other-id",
        label:"other-value",
        childs: {
             ...
        }
    }
}

商店中整个条目的更改均按预期工作

storeInstance.store.set("some-id", newItem);

但是我找不到仅更新项目属性的方法。获取项目会提供一个Proxy对象，我不知道该对象如何用于更新其某些属性。

const item = storeInstance.store.get("childs");
// item is a Proxy instance and has no `.get` method to retrive a child

像这样尝试更新项目，但是强制更新所有项目，而不仅仅是更新必需的属性，这会触发比必要更多的重新渲染。

const copiedItem = mobx.toJS(storeInstance.store.get("some-id"));

// This change does not trigger mobx 
copiedItem.child["child-id"].property = someValue;

// This change does but forces updating all the item
storeInstance.set("some-id", copiedItem);

因此，我不知道如何使用mobX和嵌套的子映射对observable.map商店进行精细的更新。

编辑：问题是嵌套的childs属性没有被observable.map转换为mobx，而是保留为普通对象。怎样才能将嵌套属性强制转换为observable.map？

更新MobX嵌套的observable.map属性

0 个答案: