MobX 'this' 在 setter 操作中未定義

Question

我正在使用最近的 create-react-app 設置和 JS 和mobx decorate方法。

import { observable, action, decorate } from 'mobx'

class UserStore {
  users = []
  currentUser = {}

  setUsers(value) {
    this.users = value
  }
}

decorate(UserStore, {
  users: observable,
  currentUser: observable,
  setUsers: action
})

export default UserStore

我可以使用商店並讀取空users和currentUser observables，但是當我嘗試使用setUsers操作時，我收到以下錯誤：

TypeError: Cannot set property 'users' of undefined

在 undefined 中看起來像this ，但這是大多數 MobX 教程顯示的常見方式，不應拋出錯誤......

Answer 1

當 MobX 與 vanilla JavaScript 一起使用時，不同的上下文可能會讓人有點困惑……MobX 引入了綁定action來使這更容易。

使用action.bound的正確裝飾是：

setUsers: action.bound

或者我們可以使用 lambda 函數來確保上下文正確：

setUsers = value => {
  this.users = value
}

任何一種更改都將確保 setter 函數的上下文是正確的，並且可以使用類this 。 查看類似問題的答案以獲得更詳細的解釋。