Mobx+React：类式Store正常，函数式Store操作报错求解

错误原因分析 #

你用箭头函数定义action时踩了两个关键坑：

1. 箭头函数的this指向错误：箭头函数没有独立的this，它的this是定义时所在的上下文。在你写action(() => { this.count++ })时，箭头函数定义在模块作用域中，此时this指向undefined（严格模式下），执行时自然会触发"undefined has no properties"错误。
2. Mobx DevTool显示"unnamed action"：箭头函数没有自身的函数名，Mobx无法自动识别action名称，所以DevTool只能显示默认的"unnamed action"。

临时解决方法的原理 #

你修改的两处代码正好针对性解决了上述问题：

1. 改用普通方法定义action：increment() { this.count++ }这类普通函数的this是调用时的上下文。当你通过mystoreFromProvider.increment()调用时，this会指向store对象本身，因此能正确访问this.count。同时Mobx可以识别到方法名称，DevTool里也会显示正常的action名称。
2. 用箭头函数包裹点击事件：如果直接写onClick={mystoreFromProvider.increment}，按钮点击时，事件回调的this会默认指向触发事件的按钮元素（浏览器事件绑定的默认行为），此时this不再指向store，调用this.count仍会出错。用() => mystoreFromProvider.increment()包裹后，调用increment时是通过store对象直接触发，确保this始终指向store。

更规范的函数式Store写法 #

无需手动给每个方法添加action，用makeAutoObservable可以自动处理状态和action，写法更简洁且能避免this指向问题：

import { makeAutoObservable } from "mobx";

const myStore = makeAutoObservable({
  count: 5,
  increment() {
    this.count++;
  },
  decrement() {
    this.count--;
  }
});

export default myStore;

这种写法和类式Store的makeAutoObservable(this)逻辑一致，Mobx会自动将方法标记为action、状态标记为observable，同时保证this指向正确。

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