1

我正在尝试使用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我没有得到执行。我预计值 3 会被打印出来，但事实并非如此。我的代码有什么问题？它是使用方法的正确方法吗？autorunextendObservableextendObservable

4

2 回答 2

0

请仔细阅读此页面https://mobx.js.org/best/react.html。有一些关于使用添加的动态属性的法律extendObservable。您正在“观察”（双关语）的那个记录在该页面上的Incorrect: using not yet existing observable object properties部分。下一节也会提到正确的做法。

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

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

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

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

于 2017-03-27T07:48:38.247 回答
0

您可以在文档的常见陷阱和最佳实践部分阅读为什么这不起作用：

MobX 可观察对象不会检测或响应之前未声明为可观察的属性分配。因此 MobX 可观察对象充当具有预定义键的记录。您可以使用 extendObservable(target, props)来向对象引入新的可观察属性。然而，对象迭代器喜欢for .. in或 Object.keys()不会自动对此做出反应。如果您需要动态键控对象，例如通过 id 存储用户，请使用 observable.map创建 observable _map_s 。

因此，不用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);
于 2017-03-27T09:38:00.913 回答