使用Mobx的makeAutoObservable时this未绑定无法读取counter错误如何解决

问题根因 #

你报错的核心原因是 makeAutoObservable 默认不会自动绑定类方法的this指向：
你之前用makeObservable时显式给increment、decrement加了action.bound配置，会自动把两个方法的this绑定到store实例，所以你在组件里直接解构方法出来当点击回调不会有问题。
但切换成makeAutoObservable之后没有配置自动绑定，你在组件里解构increment、decrement两个方法的时候，就把方法和store实例的上下文切断了，点击触发方法时this指向为undefined，自然读不到this.counter。

可用解决方案 #

• 方案1：给makeAutoObservable开启自动绑定配置
  直接修改store的构造函数，给makeAutoObservable传入第三个配置项开启autoBind即可，和你之前用action.bound的效果完全一致：

  constructor(arg) {
    // 第三个参数为全局配置，autoBind设为true会自动绑定所有方法的this到实例
    makeAutoObservable(this, {}, { autoBind: true });
  }
  

• 方案2：组件调用时不直接解构方法，或者调用时绑定上下文
  不解构方法，调用的时候直接通过实例访问即可保留上下文：

  // 组件里修改写法，不单独提取方法
  const { sampleStore } = store;
  // 渲染部分直接通过实例调用方法
  <button onClick={() => sampleStore.increment()}>+</button>
  <button onClick={() => sampleStore.decrement()}>-</button>
  

• 方案3：把store的方法改成箭头函数写法
  箭头函数会继承类实例的this指向，解构后也不会丢失上下文：

  class SampleStore {
    counter = 0;
  
    constructor(arg) {
      makeAutoObservable(this);
    }
    // 改成箭头函数绑定this
    increment = () => {
      this.counter++;
      return this.counter;
    }
    decrement = () => {
      this.counter--;
      return this.counter;
    }
  }
  

内容的提问来源于stack exchange，提问作者Jon_B