MobX 和 hashmap 更新不会触发自动运行答案

【问题标题】：MobX and hashmap update not triggering autorunMobX 和 hashmap 更新不会触发自动运行
【发布时间】：2018-04-07 19:22:31
【问题描述】：

我正在尝试更新 Test 类的 _users 哈希图，并且发生了两件“奇怪”的事情（我是 MobX 新手）：

MobX，即使启用了严格模式，也允许我更新 _users，即使它是可观察的并且 addUser() 不是 @action
自动运行只执行一次，而我预计它会运行 3 次

如果我将 this._users = {} 放入 addUser() 中，事情会按预期工作：MobX 告诉我将 addUser 定义为一个操作，并且自动运行会被触发多次。但这只是为了测试，我不需要每次都重置hashmap

我应该如何更新 _users 以让 MobX 触发事件？

代码如下

import { useStrict, configure, autorun } from 'mobx';
import { observable, action, computed } from 'mobx';


configure({ enforceActions: true });


class Test {
    @observable _users = {};
    userCount = 0;

    addUser() {
        this._users[this.userCount++] = 0;
    }

}

var t = new Test();

autorun(function test () {
    console.log("users: ", t._users);
});

t.addUser();
t.addUser();
t.addUser();

console.log("users: ", (Object.keys(t._users)).length); // print users: 3

【问题讨论】：

您是否尝试过使用@observable.deep _users = {}; 它应该在您处理对象时观察。 (mobx.js.org/refguide/api.html#decorators)。另一种可能性是使用observable.map (mobx.js.org/refguide/map.html)
@observable.deep 不行，我看看 observable map 谢谢

标签： javascript mobx

【解决方案1】：

要使自动运行（以及一般的观察者）工作，您必须访问被观察对象的属性。只有读取（取消引用）会告诉 mobx 观察什么。您没有在 autorun 函数中执行此操作，因此 autorun 没有机会获得应该再次运行 autorun 的时间。

因此，在您的情况下，您必须至少阅读观察对象的一个道具。因此，我建议执行以下操作：

import { useStrict, configure, autorun } from 'mobx';
import { observable, action, computed } from 'mobx';


configure({ enforceActions: true });


class Test {
    @observable _userStore = { users: {} };
    userCount = 0;

    addUser() {
        this._userStore.users[this.userCount++] = 0;
    }

}

var t = new Test();

autorun(function test () {
    console.log("users: ", t._userStore.users); // Here we are reading a prop of userStore
});

t.addUser();
t.addUser();
t.addUser();

console.log("users: ", (Object.keys(t._userStore.users)).length); // print users: 3

参考资料：

https://mobx.js.org/best/react.html

【讨论】：