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 可观察对象，但是当我尝试使用 setUsers 操作时，我收到以下错误：

TypeError: Cannot set property 'users' of undefined

它看起来像 this 未定义，但这是大多数 MobX 教程显示的常见方式，不应该抛出错误...

Answer 1

当将 MobX 与 vanilla JavaScript 一起使用时，不同的上下文可能会有点混乱... MobX 引入了 bound actions 以简化此过程。

使用 action.bound 的正确装饰应该是：

setUsers: action.bound

或者我们可以使用 lambda 函数来确保上下文正确：

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

任一更改都将确保 setter 函数的上下文正确并且可以使用 class this。查看 answers to a similar question 以获得更详细的解释。

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

MobX 'this' is undefined in setter action

javascript

reactjs

mobx

mobx-react

create-react-app