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

必须遵守您的计算，以便在它取决于变化的可观察量时重新计算它。

This example使用autorun来显示行为：

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

我发现了问题。因为观察者没有正确使用。

Answer 3

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

否则使用非计算/普通属性或自己缓存值。

Answer 4

如果@withRouter 在@observer 之下，将会使@observer,@computed 失败像这样（错误）：

@observer 
// @ts-ignore
@withRouter

你需要这样写（正确）：

// @ts-ignore 
@withRouter
@observer

Mobx计算不起作用

4 个答案: