Question

我正在尝试使用extendObservable在可观察状态下添加更多属性，但它不起作用。以下是我的代码

var store = mobx.observable({
  property: {}
});


mobx.autorun(function () {
  console.log("render:"+store.property.a);
});

store.property = {a:1};
extendObservable(store.property, {a:2});
store.property.a=3;

输出结果为：

render:undefined
render:1

我使用property对象初始化了一个商店。我想在a下添加property作为可观察状态，但在使用autorun方法后我没有执行extendObservable。我预计价值3会被印刷，但它没有。我的代码出了什么问题？这是使用extendObservable方法的正确方法吗？

Answer 1

请仔细阅读本页https://mobx.js.org/best/react.html。使用extendObservable添加动态属性的使用有一些规律。你是一个＆＃34;观察＆＃34; （双关语）记录在该页面的不正确：使用尚未存在的可观察对象属性部分。在下一节中也提到了正确的方法。

基本上，您的跟踪函数必须使用observable的get方法，以确保在状态突变时再次调用它。固定代码是 -

mobx.autorun(function () {
  console.log("render:"+store.property.get("a"));
});

extendObservable(store.property, {a:2});
store.property.set("a", 3);

因此，您需要将get / set与extendObservable扩展对象一起使用。

Answer 2

您可以在文档的Common pitfalls & best practices部分中了解这不起作用的原因：

MobX可观察对象不会检测或响应属性分配之前没有被宣布为可观察的。所以MobX可观察对象充当具有预定义键的记录。您可以使用 extendObservable(target, props)引入新的可观察性对象的属性。但是对象迭代器如for .. in或 Object.keys()不会自动对此做出反应。如果你需要一个动态键控对象，例如按id，create存储用户可观察的_map_s使用 observable.map

因此，不要在可观察对象上使用extendObservable，而只需向可观察的地图添加新密钥。

示例

var store = mobx.observable({ property: mobx.observable.map({}) }); mobx.autorun(function () { console.log('render:' + store.property.get('a')); }); store.property.set('a', 2); setTimeout(function () { store.property.set('a', 3); }, 2000);

mobx extendObservable没有按预期工作

2 个答案: