Tengo una tienda MobX simple que tiene un bool var contactFormOpen y una función para configurar setContactFormOpen. Funciona al hacer clic fuera del modal o al cancelar. Puedo ver que cambia pero el modal no se abre ni se cierra.
const handleCancel = (e: any) => { e.stopPropagation(); store.setContactFormOpen(false); }; return ( <Modal title="Contact us" visible={store.contactFormOpen} width={740} centered footer={null} onCancel={(e) => handleCancel(e)}> <h1>Contact form</h1> </Modal> ) En el registro de la consola, puedo ver que store.contactFormOpen está cambiando de verdadero a falso, pero el modal no se cierra ni se abre. ¿Algunas ideas? ¡Gracias!
La tienda :
export default class store { contactFormOpen = false; constructor() { makeAutoObservable(this) } setContactFormOpen = (isOpen: boolean) => { this.contactFormOpen = isOpen; } }Es difícil entender cómo se ve su aplicación a partir de su descripción, pero está claro que se perdió al menos una cosa importante: para que un componente conozca los cambios en la tienda, debe estar envuelto en un observador.
Reproduje aproximadamente su aplicación y aquí hay un enlace donde puede ver cómo se debe implementar:
Mmmm suena raro. ¿Puedes agregar este código y decirme si funciona?
const [openContactForm,setOpenContactForm] = useState(false) useEffect(()=>{ if(openContactForm !== store.contactFormOpen) { setOpenContactForm(store.contactForm) } },[store.contactFormOpen])Y cambia tu JSX a esto:
<Modal title="Contact us" visible={openContactForm} width={740} centered footer={null} onCancel={(e) => handleCancel(e)}> <h1>Contact form</h1> </Modal>