Mobx 计算不起作用

Question

我正在使用mobx 4.2.0 当我尝试使用计算属性时，我遇到了一些问题 像这样编写代码：

class ODOM {
constructor(props) {
console.log('how many times')
}
@observable speed = 0
@action change(obj) {
console.log(obj)
Object.keys(obj).forEach(item => {
this[item] = obj[item]
})
}
@computed get velocity() {
console.log('entry')
return this.speed*60*60/1000
}
}
const model = new ODOM()
let total = 0
setInterval(() => {
model.change({
speed: ++total
})
}, 3000)
export default model

控制台"入口"仅运行一次 这些代码有什么问题

Answer 1

必须观察计算，以便在它所依赖的可观察量发生变化时重新计算。

此示例使用自动运行来显示行为：

class ODOM {
@observable speed = 0
@action change(obj) {
Object.keys(obj).forEach(item => {
this[item] = obj[item]
})
}
@computed get velocity() {
console.log('entry')
return this.speed*60*60/1000
}
}
const model = new ODOM()
let total = 0
setInterval(() => {
model.change({
speed: ++total
})
}, 1000);
autorun(() => {
console.log(model.velocity);
});

Answer 2

计算重新计算仅由在呈现函数中直接使用此属性的组件中的 mobx 触发，并且这些 react 组件必须使用@observer属性进行批注。

否则，请使用非计算/正常属性或自行缓存值。

Answer 3

如果@withRouter低于@observer将导致@observer，@computed失败 像这样(错误(：

@observer 
// @ts-ignore
@withRouter

你需要这样写(正确(：

// @ts-ignore 
@withRouter
@observer 

Answer 4

我发现了问题。导致观察器未正确使用。