mobX: TypeError: Cannot read properties of undefined

Question

我只是用 mobX 玩一些代码，这发生了，不知道为什么，但我确信它与官方文档没有太大区别

这里是store.tsx

import { observable, computed, action, makeObservable, override, makeAutoObservable } from "mobx"

class CounterStore {
  initValue = 0
  powValue = Math.pow(this.initValue, 2)
  constructor() {
    makeAutoObservable(this)
  }
  increaseNumber() {
    this.initValue = this.initValue + 1
  }
}
const Store = new CounterStore()
export default Store

这是我使用它的地方。叫做 increasement.tsx

import { observer } from "mobx-react"

export const IncrementButton = observer(({ store }) => {
  return (
    <div>
      <button onClick={store.increaseNumber}>Increase</button>
      <h1>{store.initValue}</h1>
    </div>
  )
})

和index.tsx

ReactDOM.render(
  <React.StrictMode>
    <IncrementButton store={Store} />
    {/* <TestUseState /> */}
    {/* <TestEffect />
     <UseMemoTest /> */}
  </React.StrictMode>,
  document.getElementById("root"),

奇怪的是，它显示 initValue，但是当我单击增加时它显示 can't not read properties 请帮忙，谢谢

Answer 1

将 makeAutoObservable 更改为 makeObservable 并手动将 action.bound 分配给每个操作而不是 action。我有一个类似的错误，它解决了它。

Answer 2

正如@mimoid 所注意到的，您的方法未绑定到 class 和丢失上下文 (this)。这不是 MobX 的问题，它只是一个叫做 late binding.

的常规 javascript 特性

虽然你真的不需要将 makeAutoObservable 更改为 makeObservable，你可以只使用箭头函数，在我看来这是更“原生”的方式：

class CounterStore {
  initValue = 0
  powValue = Math.pow(this.initValue, 2)
  constructor() {
    makeAutoObservable(this)
  }
  // Just make it an arrow function
  increaseNumber = () => {
    this.initValue = this.initValue + 1
  }
}

mobX: TypeError: Cannot read properties of undefined

mobX: TypeError: Cannot read properties of undefined

javascript

reactjs

mobx