MobX Observer组件未响应Observable状态变更问题求助

问题根源 #

• 你的App是普通React组件，没有被observer修饰，MobX 不会跟踪普通组件内读取的observable/ computed值变化，也就不会触发App组件重渲染。你首次渲染时调用isOpen.get()拿到初始值传给ChildComponent后，后续状态更新时App不会重新执行渲染逻辑，传给Child的prop永远是初始值，因此Child不会更新。
• 另外你传给ChildComponent的是isOpen.get()返回的原始布尔值，不是observable引用，即便Child是observer组件，也无法跟踪这个普通值的后续变化。

修复方案（二选一即可） #

方案1：给App组件加上observer修饰

让App组件可以响应observable变化触发重渲染，每次状态更新都会重新计算isOpen.get()把最新值传给Child：

// App.tsx 修改导出部分
export default observer(function App() {
  // 原有逻辑保持不变
})

方案2：传递computed对象本身到Child内部读取

把computed引用传给Child，在observer修饰的Child内部执行.get()，由Child自己跟踪状态变化触发重渲染，不需要App更新：

// App.tsx 中调用Child的部分修改
<ChildComponent isOpen={isOpen} />

// ChildComponent 修改
const ChildComponent = observer(({ isOpen }: { isOpen: ComputedValue<boolean> }) => (
  <p>isOpen: {isOpen.get().toString()}</p>
));

额外优化建议 #

你Controller里的state是字符串基础类型，不需要使用@observable.ref，直接用@observable修饰即可，@observable.ref仅用于不需要深度监听的对象/引用类型值。

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