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
プレーンな動的オブジェクトと同じ動作を取得するにはどうすればよいですか？つまり、既存の参照から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";
これは、深い配列に何かを追加するたびに、中に入れたものすべてがラップされて観察可能になるためです。
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}このオブジェクトはラップ/監視可能なオブジェクトに変換されないため、行った変更は表示されますが、これらの変更は配列自体の変更に向けて追跡されません。したがって、再レンダリングはトリガーされません。
また、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)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加