如何使用Mobx ObservableList更新列表项内对象并实时刷新界面？

核心原因 #

ObservableList默认仅追踪列表的增、删、替换操作，不会自动监听列表内部对象的属性变化，所以直接修改对象属性时，MobX无法感知到变化，自然不会触发界面更新。

解决方案 #

• 让列表内的对象成为可观察对象
  给列表项的类添加MobX的可观察处理，确保属性变化能被追踪。推荐使用makeAutoObservable自动处理所有属性和方法：

  import { makeAutoObservable } from "mobx";
  
  class ListItem {
    label = "";
    value = "";
  
    constructor(label, value) {
      this.label = label;
      this.value = value;
      makeAutoObservable(this); // 自动将属性转为可观察，方法转为action
    }
  
    updateValue(newValue) {
      this.value = newValue; // 直接修改属性即可触发追踪
    }
  }
  

  之后在@action函数中调用对象的updateValue方法，或者直接修改属性，都能触发界面更新。

• 替换列表中的对象（应急方案）
  如果无法修改列表项的类，可以通过创建新对象替换原对象的方式，让ObservableList检测到变化：

  import { action, observable } from "mobx";
  
  class Store {
    list = observable([]);
  
    @action
    updateItemValue(index, newValue) {
      const oldItem = this.list[index];
      // 解构创建新对象，替换原位置的对象
      this.list[index] = { ...oldItem, value: newValue };
    }
  }
  

• 确保组件正确订阅变化
  渲染列表的组件必须用MobX的observer高阶组件包裹，这样组件才能响应可观察数据的变化：

  import { observer } from "mobx-react-lite";
  
  const ListComponent = observer(() => {
    const store = useStore(); // 获取你的MobX store
    return (
      <ul>
        {store.list.map((item, idx) => (
          <li key={idx}>
            {item.label}: {item.value}
            <button onClick={() => item.updateValue("新值")}>修改</button>
          </li>
        ))}
      </ul>
    );
  });
  

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