使用MobX状态控制时Antd Modal无法正常打开/关闭的问题

• 组件未建立MobX状态订阅：MobX的响应式更新依赖收集机制，只有被observer高阶组件包裹的React组件，才能在渲染时收集到读取过的可观测状态，状态变更时触发重渲染。你能在控制台看到store.contactFormOpen值正常切换，仅代表store内部状态更新逻辑正确，但承载Modal的组件没有被observer包裹，不会响应状态变化执行重渲染，Modal的visible属性始终使用首次渲染时的旧值，自然无法执行打开/关闭动作。
• 多实例状态不互通：当前store代码仅导出类本身，未导出统一的单例实例，如果业务代码中多次执行new store()，会生成多个互相独立的store实例，触发更新的实例和组件读取状态的实例不是同一个，也会导致UI不响应更新。

• 为消费store状态的组件添加observer包裹
  函数组件从mobx-react-lite引入observer，类组件从mobx-react引入observer，包裹组件后再导出，示例代码：

import { Modal } from 'antd';
import { observer } from 'mobx-react-lite';
import store from './store';

const ContactEntry = () => {
  const handleCancel = (e: any) => {
    e.stopPropagation();
    store.setContactFormOpen(false);
  };

  return (
    <Modal 
      title="Contact us" 
      visible={store.contactFormOpen} 
      width={740} 
      centered 
      footer={null} 
      onCancel={handleCancel}
    >
      <h1>Contact form</h1>
    </Modal>
  )
}

// 重点：用observer包裹组件建立状态订阅
export default observer(ContactEntry);

• 修改store导出逻辑，保证全局使用同一个实例
  不要直接导出类，而是提前实例化后导出单例，避免多实例状态不一致问题，修正后的store代码：

import { makeAutoObservable } from 'mobx';

class ContactStore {
  contactFormOpen = false;

  constructor() {
    makeAutoObservable(this);
  }

  setContactFormOpen = (isOpen: boolean) => {
    this.contactFormOpen = isOpen;
  }
}

// 导出全局单例实例
export default new ContactStore();

验证方式：修改完成后可以在组件渲染函数内打印store.contactFormOpen，如果状态更新时能触发日志打印，说明组件已经正确订阅状态变化，Modal即可正常响应开关动作。

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