MobX状态变更但组件未重新渲染：使用MobX Store控制Ant Design Modal显隐异常排查

看起来你遇到的核心问题是React组件没有响应MobX状态的变化，这是因为MobX的状态更新需要让React组件"观察"到这些变化，否则组件不会触发重渲染，自然useEffect也不会执行，Modal的visible状态也就不会更新。

问题根源 #

你的ContactPopUp组件虽然通过useStore获取了MobX的store，但没有使用MobX提供的React绑定（observer高阶组件）来包裹组件。这就导致组件无法感知到appStore.contactFormOpen的变化——即使状态已经改变，组件也不会重新渲染，所以你会看到状态日志变化了，但Modal毫无反应。

修复步骤 #

1. 确保安装了mobx-react-lite

因为你使用的是函数组件，需要这个包来让MobX和React协同工作：

npm install mobx-react-lite
# 或者 yarn add mobx-react-lite

2. 用observer包裹ContactPopUp组件

修改你的ContactPopUp.tsx代码，引入observer并包裹组件：

import { Modal } from "antd";
import React from "react";
import { useStore } from "../store/store";
import { observer } from "mobx-react-lite"; // 引入observer

const ContactPopUp = () => {
  const { appStore } = useStore();

  const handleCancel = () => {
    appStore.setContactFormOpen(false);
    console.log("Close contact from", appStore.contactFormOpen);
  };

  // 直接使用store中的状态，不需要额外的useState和useEffect
  return (
    <Modal title="Contact us" visible={appStore.contactFormOpen} onCancel={handleCancel}>
      <h2>Modal Open</h2>
    </Modal>
  );
};

export default observer(ContactPopUp); // 用observer包裹组件后导出

3. 移除多余的本地状态与副作用

原来的代码里用useState维护了本地状态visible，还加了useEffect同步store状态，这完全是多余的。当组件被observer包裹后，直接使用appStore.contactFormOpen作为Modal的visible属性即可，MobX会自动在状态变化时触发组件重渲染。

额外提示 #

如果以后你的AppNavigation组件需要依赖MobX状态做渲染逻辑，也需要用observer包裹它。不过目前它只是触发状态更新，暂时不需要，但养成这个习惯能避免后续类似问题。

这样修改后，当你点击菜单里的Contact按钮时，appStore.contactFormOpen变为true，ContactPopUp组件会立刻感知到变化并重新渲染，Modal就会正常打开；点击取消按钮时，状态变为false，Modal也会同步关闭。

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