MobX Observable未触发变更问题求助

我明白你现在的困扰——明明按MobX的思路更新了可观察对象，却没触发组件重新渲染对吧？咱们一步步来排查最可能的问题点：

1. 组件是否被observer高阶组件包裹？ #

这是最容易忽略的基础问题！对于React类组件，必须用mobx-react提供的observer包装组件，MobX才能追踪组件内用到的可观察值变化，进而触发重渲染。示例：

import { observer } from 'mobx-react';

class YourJobComponent extends React.Component {
  // 你的组件逻辑
  render() {
    // 这里用到store的计算属性或可观察值
    const submittedJobs = this.props.store.renderSubmittedJobs;
    return <div>{submittedJobs.map(job => <div key={job.id}>{job.name}</div>)}</div>;
  }
}

// 关键：用observer包裹组件
export default observer(YourJobComponent);

如果没加observer，就算可观察对象jobs变化了，组件也毫无感知。

2. jobs是否被正确标记为可观察对象？ #

MobX只会追踪被标记为observable的值的变化。你需要确保jobs是通过MobX的API定义的可观察值：

• 如果你用makeAutoObservable（推荐），在store的构造函数里调用它，会自动把类的属性转为可观察，方法转为action：

import { makeAutoObservable } from 'mobx';

class JobStore {
  jobs = []; // 初始化为空数组

  constructor() {
    makeAutoObservable(this); // 自动处理可观察和action
  }

  refreshJobs() {
    // 示例：模拟从API获取新数据后更新jobs
    const newJobs = [{ id: 1, status: 'submitted' }, { id: 2, status: 'inProgress' }];
    this.jobs = [...newJobs]; // 替换数组引用，确保MobX能捕捉到变化
  }
}

• 如果你用装饰器，要给jobs加上@observable装饰器：

import { observable, action } from 'mobx';

class JobStore {
  @observable jobs = [];

  @action
  refreshJobs() {
    // 更新逻辑
  }
}

另外注意：更新数组时，尽量替换整个数组的引用（比如用展开运算符），或者使用MobX提供的数组方法（如push、splice），原地修改普通数组（比如this.jobs[0].status = 'done'）如果是可观察数组的话是可以的，但如果是普通数组没被包装，MobX可能追踪不到。

3. 计算属性是否正确定义？ #

你的renderSubmittedJobs和renderInProgressJobs需要是计算属性（getter方法），而不是普通方法，这样MobX才会缓存结果并追踪依赖变化：

class JobStore {
  // ...其他代码

  // 正确：用get定义计算属性
  get renderSubmittedJobs() {
    return this.jobs.filter(job => job.status === 'submitted');
  }

  get renderInProgressJobs() {
    return this.jobs.filter(job => job.status === 'inProgress');
  }
}

如果把它们写成普通方法（比如renderSubmittedJobs()），每次调用都会重新计算，但MobX不会追踪它们的依赖，也就不会在jobs变化时自动触发组件重渲染。

4. refreshJobs是否在MobX的action上下文里？ #

更新可观察对象的操作必须放在MobX的action中，否则MobX可能无法正确触发反应（严格模式下还会报错）：

• 如果用makeAutoObservable，类里的方法会自动被标记为action，无需额外处理；
• 如果是异步更新（比如从API获取数据后更新jobs），要确保更新操作在action里：

import { makeAutoObservable, runInAction } from 'mobx';

class JobStore {
  jobs = [];

  constructor() {
    makeAutoObservable(this);
  }

  async refreshJobs() {
    // 异步请求API
    const response = await fetch('/api/jobs');
    const newJobs = await response.json();
    // 用runInAction包裹异步后的更新操作
    runInAction(() => {
      this.jobs = newJobs;
    });
  }
}

因为异步函数中，await之后的代码不在原始的action上下文里，所以需要用runInAction手动包裹更新逻辑。

5. 组件中是否正确使用计算属性？ #

在组件的render方法里，要直接访问计算属性的getter，不要把它当成普通方法调用：

// 正确
render() {
  const submittedJobs = this.props.store.renderSubmittedJobs;
  return <div>{submittedJobs.map(...)}</div>;
}

// 错误（这样不会触发依赖追踪）
render() {
  const submittedJobs = this.props.store.renderSubmittedJobs();
  return <div>{submittedJobs.map(...)}</div>;
}

先从这几点开始排查，大部分情况下都是这些基础配置没到位导致的。如果还是不行，可以再检查是否有React.memo/PureComponent的干扰，或者是否在计算属性里做了一些MobX无法追踪的操作（比如使用非可观察的外部变量）。

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