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 的响应式规则，不仅能降低报错率，还能提升应用性能。