Mobx 监听一个值的变化与计算不起作用
Mobx listen to a value changes with computed does not work
我正在尝试使用 mobx
计算表达式来监听值的变化,但是当我将新值推送到观察到的表达式时,我没有看到任何变化。
class List {
@observable values = [];
constructor() {
computed(() => this.values).observe(changes => {
console.log(changes);
})
}
add(item) {
this.values.push(Math.random());
}
}
const list = new List();
list.add();
为什么不起作用?
computed is used when you want to derive a new value from other observables. You could use observe 改为:
示例 (JSBin)
class List {
@observable values = [];
constructor() {
observe(this.values, (change) => {
if (change.added) {
console.log(`${change.added} got added to values`);
}
});
}
add(item) {
this.values.push(Math.random());
}
}
const list = new List();
setInterval(() => {
list.add();
}, 1000);
请注意,computed
只会跟踪它实际访问的数据。在您的计算中访问的唯一数据是 changes
,一个指向数组的指针。将新值推送到该数组不会更改指针。
记住:计算产生值,反应和自动运行产生副作用。
您的计算永远不会产生新值,因此永远不会触发 observer
。
我正在尝试使用 mobx
计算表达式来监听值的变化,但是当我将新值推送到观察到的表达式时,我没有看到任何变化。
class List {
@observable values = [];
constructor() {
computed(() => this.values).observe(changes => {
console.log(changes);
})
}
add(item) {
this.values.push(Math.random());
}
}
const list = new List();
list.add();
为什么不起作用?
computed is used when you want to derive a new value from other observables. You could use observe 改为:
示例 (JSBin)
class List {
@observable values = [];
constructor() {
observe(this.values, (change) => {
if (change.added) {
console.log(`${change.added} got added to values`);
}
});
}
add(item) {
this.values.push(Math.random());
}
}
const list = new List();
setInterval(() => {
list.add();
}, 1000);
请注意,computed
只会跟踪它实际访问的数据。在您的计算中访问的唯一数据是 changes
,一个指向数组的指针。将新值推送到该数组不会更改指针。
记住:计算产生值,反应和自动运行产生副作用。
您的计算永远不会产生新值,因此永远不会触发 observer
。