Mobx Store更新数据后AGGrid未同步更新的问题排查

我来帮你分析下这个问题：你的deleteRecord能正常工作是因为直接替换了gridData的数组引用（filter返回新数组），Mobx能检测到这个引用变化，从而触发observer组件重渲染，AG Grid也跟着更新。但updateRecord里的两种写法都无法被Mobx正确追踪到变化，所以AG Grid没反应，具体原因和解决方案如下：

问题根源 #

Mobx的可观测性追踪有两个关键点：

1. 数组的索引直接赋值无法被拦截：原生JS数组的arr[index] = value操作无法被Mobx拦截，所以这种修改不会触发Mobx的响应式更新。
2. 普通对象的属性修改无法被追踪：你的gridData里的IEmployee是普通JS对象，不是Mobx可观测对象，所以直接修改obj.name这种属性，Mobx感知不到变化。

三种可行解决方案 #

方案1：替换整个数组（最简单，和deleteRecord逻辑一致） #

通过map创建新数组，替换原有gridData的引用，Mobx会检测到这个变化并触发更新：

updateRecord(id: number, newData: { name: string }) {
  this.gridData = this.gridData.map(record => 
    record.id === id ? { ...record, ...newData } : record
  );
}

方案2：使用Mobx可观测数组的API修改元素 #

Mobx对可观测数组的标准方法（如splice、push等）做了拦截，调用这些方法会触发更新。我们可以用splice替换目标元素：

updateRecord(id: number, newData: { name: string }) {
  const index = this.gridData.findIndex((record) => record.id === id);
  if (index !== -1) {
    // 基于原对象创建新对象，替换指定位置的元素
    this.gridData.splice(index, 1, {
      ...this.gridData[index],
      ...newData
    });
  }
}

方案3：让数组内的对象成为可观测对象 #

初始化gridData时，把每个IEmployee对象转为Mobx可观测对象，这样直接修改对象属性就能被追踪：

import { observable, action, makeAutoObservable } from 'mobx';

// ... 其他代码

class MyStore {
  // 用observable包裹每个对象，使其成为可观测对象
  gridData: IEmployee[] = [
    observable({ id: 1, name: 'John' }),
    observable({ id: 2, name: 'Jane' })
  ];

  constructor() {
    makeAutoObservable(this, {
      gridData: observable,
      updateRecord: action,
      deleteRecord: action
    });
  }

  updateRecord(id: number, newData: { name: string }) {
    const index = this.gridData.findIndex((record) => record.id === id);
    if (index !== -1) {
      // 现在直接修改属性会被Mobx追踪到
      this.gridData[index].name = newData.name;
    }
  }

  // ... deleteRecord代码不变
}

验证修改 #

随便选一种方案修改你的updateRecord方法后，点击"Update record"按钮，AG Grid就能同步显示更新后的名字了。

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