MobX更改但不重命名组件

Question

我想打开和关闭使用MobX商店的and Modal组件。我有下面的代码，这里有一个指向代码框https://codesandbox.io/s/nifty-dijkstra-g0kzs6?file=/src/App.js的链接

import AppNavigation from "./components/Menu";
import ContactPopUp from "./components/Contact";
export default function App() {
  return (
    <div className="App">
      <AppNavigation />
      <ContactPopUp />
    </div>
  );
}

带有MobXstore的文件

import { createContext, useContext } from "react";
import AppStore from "./appStore";

interface Store {
  appStore: AppStore;
}

export const store: Store = {
  appStore: new AppStore()
};

export const StoreContext = createContext(store);

export function useStore() {
  return useContext(StoreContext);
}

我声明商店的单独文件

import { makeAutoObservable } from "mobx";

export default class AppStore {
  contactFormOpen = false;

  constructor() {
    makeAutoObservable(this);
  }

  setContactFormOpen = (isOpen: boolean) => {
    console.log("Changed contact form to ", isOpen);
    this.contactFormOpen = isOpen;
  };
}

The Menu.tsx

import React from "react";
import { Menu, MenuProps } from "antd";
import { useStore } from "../store/store";

const AppNavigation = () => {
  const { appStore } = useStore();
  const menuItems: MenuProps["items"] = [
    {
      label: <a onClick={(e) => handleOpenContactForm(e)}>Contact</a>,
      key: "Contact"
    }
  ];

  const handleOpenContactForm = (e: any) => {
    e.preventDefault();
    e.stopPropagation();
    appStore.setContactFormOpen(true);
    console.log("Open contact pop up", appStore.contactFormOpen);
  };

  return (
    <Menu
      items={menuItems}
      theme="dark"
      overflowedIndicator={""}
      className="header__menu award-menu header__menu--md"
    />
  );
};

export default AppNavigation;

ContactPopUp.tsx

import { Modal } from "antd";
import React, { useEffect, useState } from "react";
import { useStore } from "../store/store";

const ContactPopUp = () => {
  const { appStore } = useStore();
  const [visible, setVisible] = useState(appStore.contactFormOpen);

  useEffect(() => {
    setVisible(appStore.contactFormOpen);
  }, [appStore.contactFormOpen]);

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

  return (
    <Modal title="Contact us" visible={visible} onCancel={handleCancel}>
      <h2>Modal Open</h2>
    </Modal>
  );
}; 

export default ContactPopUp;

mobx contactFormOpen显然发生了变化，但模态状态没有变化。我真的不明白为什么..。UseEffect也不会触发重新呈现。

Answer 1

您只是忘记了最关键的部分--每个使用任何可观察值的组件都需要用observer装饰器包装！就像这样：

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

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

  return (
    <Modal
      title="Contact us"
      visible={appStore.contactFormOpen}
      onCancel={handleCancel}
    >
      <h2>Modal Open</h2>
    </Modal>
  );
};

// Here I've added `observer` decorator/HOC
export default observer(ContactPopUp);

你现在不需要useEffect之类的东西了。

码箱