Mobx中类实例作为Observable未触发响应的问题求助

你遇到的核心问题是：你的Routine和Todo类实例本身不是Mobx可观察对象，所以即使把它们放进了@observable Map里，实例内部的属性变更（比如timeSpent）或者对Map的操作（比如delete）无法被Mobx追踪到。Mobx确实支持类实例作为可观察对象，但需要你正确配置类本身的可观察性。

步骤1：让Routine和Todo类成为可观察类 #

Mobx要追踪类实例的属性变更，必须明确标记类的属性为可观察的。根据你使用的Mobx版本，有两种常见方式：

方式一：使用装饰器（Mobx 5及以下，或Mobx 6开启装饰器支持） #

import { observable, makeObservable } from "mobx";

class Routine {
  @observable id;
  @observable timeSpent;
  // 其他需要追踪的属性...

  constructor(data) {
    this.id = data.id;
    this.timeSpent = data.timeSpent || 0;
    // 如果是Mobx 6+，必须调用makeObservable让装饰器生效
    makeObservable(this);
  }

  // 可以在这里添加自定义方法，比如：
  addTime = (amount = 10) => {
    this.timeSpent += amount;
  }
}

// Todo类同理
class Todo {
  @observable id;
  @observable timeSpent;
  // ...其他属性

  constructor(data) {
    this.id = data.id;
    this.timeSpent = data.timeSpent || 0;
    makeObservable(this);
  }
}

方式二：使用makeAutoObservable（Mobx 6+推荐，无需装饰器） #

这种方式会自动把类的属性标记为可观察，方法标记为action，更简洁：

import { makeAutoObservable } from "mobx";

class Routine {
  id;
  timeSpent;

  constructor(data) {
    this.id = data.id;
    this.timeSpent = data.timeSpent || 0;
    // 自动处理可观察属性和action方法
    makeAutoObservable(this);
  }

  // 自定义方法会被自动识别为action
  addTime = (amount = 10) => {
    this.timeSpent += amount;
  }
}

步骤2：优化Task类的Action写法 #

当类实例本身是可观察对象后，你不需要在addTime里重新把实例set回Map（因为Map存的是引用，修改实例属性会直接被追踪），可以简化代码：

class Task {
  @observable list = new Map();

  constructor() {
    // 如果你用Mobx 6+，记得调用makeObservable或makeAutoObservable
    makeObservable(this);
  }

  @action addTask = (data, type) => {
    const task = type === TASKTYPE.ROUTINE ? new Routine(data) : new Todo(data);
    this.list.set(task.id, task);
    updateTask(this.list);
  }

  @action deleteTask = (id) => {
    this.list.delete(id);
    updateTask(this.list);
  }

  @action addTime = (item, amount = 10) => {
    const nItem = this.list.get(item.id);
    // 直接修改可观察实例的属性即可，不需要重新set回Map
    nItem.timeSpent += amount;
    // 或者调用实例的自定义方法：nItem.addTime(amount);
    updateTask(this.list);
  }
}

关键误区说明 #

• 忘记标记类实例的可观察属性：这是最常见的错误，Mobx不会自动追踪普通类的属性变更，必须显式声明。
• Mobx版本兼容问题：Mobx 6之后默认关闭了装饰器自动生效的功能，必须在构造函数里调用makeObservable或makeAutoObservable。
• 多余的Map重新set操作：当实例是可观察对象时，修改实例属性会直接触发响应，不需要重新覆盖Map里的引用。

这样调整后，你的类模型实例就能正常被Mobx追踪变更，同时也能保留自定义方法啦！

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