Блог

Я просто играл с каким-то кодом с MobX, и это произошло, не знаю почему, но я уверен, что это не сильно отличается от официальных документов

Вот магазин.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>
  )
})
 

И индекс.tsx

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

Странно, это видно initValue , но когда я нажимаю увеличить, это видно can't not read properties
Пожалуйста, помогите, спасибо

как заметил @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
  }
}
 

Измените makeAutoObservable значение makeObservable и назначьте action.bound каждое действие вручную вместо action . У меня была похожая ошибка, и она ее разрешила.