MobX 常见报错分析与解决指南
如果你正在使用 MobX 管理应用状态，难免会遇到一些报错，这些报错看似棘手，但多数情况下都有明确的根源，本文将针对典型问题，从原理到实践提供解决方案，帮助开发者快速定位并修复问题。
1.“[MobX] 无法在未观察的上下文中修改 OBServable”
这是最常见的报错之一，其核心原因是：在未包裹action 的方法外直接修改 observable 数据。
- class Store {
- @observable count = 0;
- increment() {
- this.count++; // 直接修改，未使用 action
- }
- }
解决方法：
- 显式声明action：
- class Store {
- @observable count = 0;
- @action
- increment() {
- this.count++;
- }
- }
- 或在非严格模式下运行（不推荐，可能导致代码不可控）。
原理：MobX 的严格模式（configure({ enforceActions: "always" })）要求所有状态变更必须通过action，以确保可预测性和调试能力。
2.“Computed values should not be modified”
当尝试修改一个@computed 属性时，会触发此报错。
- class Store {
- @observable list = [1, 2, 3];
- @computed
- get sum() {
- return this.list.reduce((a, b) => a + b, 0);
- }
- setSum(value) {
- this.sum = value; // 错误：试图修改 computed 值
- }
- }
解决方法：
@computed 是派生值，不应被直接修改，需通过修改其依赖的 observable 数据间接更新。
- setSum(newValue) {
- this.list = [newValue]; // 通过修改 list 触发 sum 重新计算
- }
**响应式更新未触发
当修改 observable 数据后，组件未重新渲染，通常由以下原因导致：
未正确标记观察者：组件未使用observer 包裹。
- // React 组件
- import { observer } from "mobx-react";
- const Counter = observer(({ store }) => (
- <div>{store.count}</div>
- ));
引用类型未深层响应：直接修改数组或对象的属性需使用observable 深层包装。
- @observable.deep items = [{ id: 1 }];
- // 或
- @observable items = observable([{ id: 1 }]);
4.“Cycle detected” 循环依赖报错
当computed 值或reaction 形成循环依赖时，MobX 会抛出此错误。
- class Store {
- @observable a = 1;
- @observable b = 2;
- @computed
- get total() {
- return this.a + this.b;
- }
- @computed
- get doubleTotal() {
- return this.total * 2; // 若 total 依赖 doubleTotal，则形成循环
- }
- }
解决方法：
- 检查计算属性的依赖链，确保无循环引用。
- 使用trace() 调试工具追踪依赖关系：
- import { trace } from "mobx";
- // 在 computed 属性内调用
- get total() {
- trace();
- return this.a + this.b;
- }
**异步操作中的报错处理
在异步函数（如setTimeout 或 API 请求）中修改 observable 数据时，需确保操作包裹在action 中，否则会触发警告：
- class Store {
- @observable data = null;
- fetchData() {
- setTimeout(() => {
- this.data = { result: "success" }; // 错误：未包裹 action
- }, 1000);
- }
- }
解决方法：
- 使用runInAction 包裹异步操作：
- import { runInAction } from "mobx";
- fetchData() {
- setTimeout(() => {
- runInAction(() => {
- this.data = { result: "success" };
- });
- }, 1000);
- }
- 或使用async/await +action：
- @action
- async fetchData() {
- const res = await api.getData();
- this.data = res;
- }
个人观点
MobX 的报错信息通常直指问题核心，理解其设计哲学（如单向数据流、严格模式）能大幅减少踩坑概率，遇到问题时，优先查阅官方文档，结合trace() 或spy() 工具调试，而非盲目搜索答案，保持代码符合 MobX 的响应式规则，不仅能降低报错率，还能提升应用性能。
