React-Native中Mobx修改观测对象属性无法触发UI渲染求助

这是个很常见的MobX新手问题，我来帮你拆解一下原因和解决办法：

问题根源 #

你目前的workingObject只是被MobX标记为可观测的引用，但当你给它赋值一个普通JS对象后，这个对象的内部属性并没有被MobX纳入追踪范围。所以修改workingObject.numberProperty时，MobX感知不到这个变化，自然不会触发UI更新。而替换整个对象引用（比如store.setWorkingObject(newObj)）能触发更新，是因为MobX在监听workingObject这个引用本身的变化。

解决方案 #

有几种方式可以解决这个问题，选最适合你场景的就行：

1. 把workingObject初始化为可观测对象 #

在Store的构造函数里，用observable.object来包装初始值，确保对象的内部属性也能被MobX追踪：

import { extendObservable, observable } from "mobx";

export default class MyStore {
  constructor() {
    extendObservable(this, { 
      // 初始化为空的可观测对象，也可以根据需求设置默认属性
      workingObject: observable.object({ numberProperty: 0 }) 
    });
  }

  // 如果需要后续设置完整对象，也要确保传入的对象是可观测的
  setWorkingObject(obj) {
    this.workingObject = observable.object(obj);
  }
}

2. 使用MobX推荐的makeAutoObservable（更简洁） #

现在MobX官方更推荐用makeAutoObservable替代extendObservable，它会自动把类的属性和方法设置为可观测/动作，省去手动配置的麻烦：

import { makeAutoObservable } from "mobx";

export default class MyStore {
  // 可以直接设置初始值，后续会被自动标记为可观测
  workingObject = { numberProperty: 0 };

  constructor() {
    makeAutoObservable(this);
    // 如果初始需要null，也可以这样写：
    // this.workingObject = null;
  }

  // 把状态修改逻辑封装成动作方法（规范上更推荐，也利于维护）
  updateNumberProperty(value) {
    if (this.workingObject) {
      this.workingObject.numberProperty = value;
    }
  }
}

然后在组件里调用这个动作方法：

<RadioGroup
  options={[
    { title: "One", value: 1 },
    { title: "Two", value: 2 }
  ]}
  onPress={option => {
    store.updateNumberProperty(option.value);
  }}
  selectedValue={store.workingObject?.numberProperty}
/>

3. 确保动态赋值的对象是可观测的 #

如果你需要动态设置workingObject，每次赋值时都用observable.object包装传入的对象：

// 在Store里添加设置方法
setWorkingObject(newObj) {
  this.workingObject = observable.object(newObj);
}

这样后续修改它的属性时，MobX就能正常追踪变化了。

其他优化建议 #

• 不要在Provider里直接new Store：你现在在Container的render里new MyStore()，每次Container渲染都会创建新的Store实例，会导致状态丢失和不必要的重渲染。应该提前创建实例：

  const myStore = new MyStore();
  
  class Container extends Component {
    render() {
      return (
        <Provider store={myStore}>
          <App />
        </Provider>
      );
    }
  }
  

• 使用可选链避免空值错误：如果workingObject可能为null，在组件里访问属性时用store.workingObject?.numberProperty，防止出现空指针报错。
• 尽量用动作方法修改状态：虽然MobX允许直接修改可观测属性，但把状态修改逻辑封装在Store的动作方法里，更利于代码维护和调试，也符合MobX的最佳实践。

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