时间戳

首页 > 解决方案 > mobX：TypeError：无法读取未定义的属性

javascript - mobX：TypeError：无法读取未定义的属性

问题描述

我只是用 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

这是我使用它的地方。称为增加.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 请帮助，谢谢

标签： javascriptreactjsmobx

解决方案

正如@mimoid 所注意到的，您的方法未绑定到类并丢失上下文（this）。这不是 MobX 的问题，它只是称为 后期绑定的常规 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
  }
}

推荐阅读