MobX：从 observable.map() 引用对象

Question

在使用 MobX 的 observable.map() 时，我发现存储在地图中的对象不再链接到原始对象：

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


configure({ enforceActions: true });

let user = {id: 1, name: "John"};

let myMap = observable.map();
myMap.set(user.id, user);
user.name = "Bill";
console.log(myMap.get(1).name); // John is printed, I expect Bill

如何获得与普通动态对象相同的行为？ IE。有没有一种方法可以根据以前存在的引用更新 observable.maps 内的对象？

user = {id: 1, name: "John"};
let myClassicMap = {};
myClassicMap[user.id] = user;
user.name = "Bill";
console.log(myClassicMap[1].name); // Bill is printed as expected

编辑

使用 observable.map(values, { deep: false }) 我得到了通常的行为，但我不明白我是否在可观察性方面失去了一些东西。在下面的示例中，自动运行不是由 user.name 的更改触发的，不是吗？

import { observable, autorun} from 'mobx';

let myMap = observable.map({}, {deep: false});
myMap.set(user.id, user);
autorun(() => console.log(myMap));
user.name = "Bill";

Answer 1

这是因为每当你向深数组中添加一些东西时，你放入其中的所有内容也会 wrapped/turned 进入 observable:

let user = {id: 1, name: "John"};

let myMap = observable.map();
myMap.set(user.id, user); //here user is turned into observeable object where all curent keys are tracked

如果你不深入：{deep: false} 那么这个对象将不会 wrapped/turned 成为可观察对象，因此你所做的任何更改都是可见的，但这些更改不会被跟踪到数组本身。因此不会触发任何 re-render.

还要确保在 action() 中执行所有操作，因为您启用了 configure({ enforceActions: true });:

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


configure({ enforceActions: true });

let user = {id: 1, name: "John"};

let myMap = observable.map();
action(() =>{
    myMap.set(user.id, user);
    user = myMap.get(1); //here we retrieved the observable object version of user.
    user.name = "Bill";
})()
console.log(myMap.get(1).name)

MobX：从 observable.map() 引用对象

MobX: references to objects from an observable.map()

javascript

mobx