mobx extendObservable 没有按预期工作

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 对象初始化了一个商店。我想在 property 下添加 a 作为可观察状态，但在使用 extendObservable 方法后我没有执行 autorun 。我希望值 3 被打印出来，但它没有。我的代码有什么问题？ extendObservable方法的正确使用方法吗？

Answer 1

请仔细阅读此页 https://mobx.js.org/best/react.html。使用 extendObservable 添加的动态属性的使用有一些法律。你是 "observing"（双关语）的人记录在该页面的 不正确：使用尚未存在的可观察对象属性 部分。正确的做法在后面的章节中也会提到。

基本上，您的跟踪函数必须使用可观察对象的 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 observable objects do not detect or react to property assignments that weren't declared observable before. So MobX observable objects act as records with predefined keys. You can use extendObservable(target, props) to introduce new observable properties to an object. However object iterators like for .. in or Object.keys() won't react to this automatically. If you need a dynamically keyed object, for example to store users by id, create observable _map_s using 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 没有按预期工作

mobx extendObservable doesn't work as expected

javascript

reactjs

mobx

mobx-react