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 觸發，這些組件直接在 render 函數中使用此屬性，並且這些 react 組件必須使用@observer屬性進行注釋。

否則使用非計算/正常屬性或自己緩存值。

Answer 3

如果@withRouter 在@observer 下會使@observer,@computed 失敗像這樣（錯誤）：

@observer 
// @ts-ignore
@withRouter

你需要這樣寫（正確）：

// @ts-ignore 
@withRouter
@observer 

Answer 4

我發現了問題。因為觀察者沒有正確使用。