Estoy representando condicionalmente un Modal, con datos que se procesan en el clic anterior y tan pronto como se cierra el modal, esos datos se eliminan del estado. (Todos los datos relacionados con el modal se almacenan en el componente principal).
Ahora estoy usando CSSTransition de react-transition-group, para animar el montaje/desmontaje de Modal, el fragmento de código que llama a Modal es como
<CSSTransition in={modal.status && modal.state === 'MEDIA_INFO_MODAL'} appear={true} timeout={200} nodeRef={modalRef} classNames="my-node" unmountOnExit \> <Modal ref={modalRef} modalClicker={modalHandler}>{modal.data}</Modal> </CSSTransition> Y como se puede ver en este codesandbox, el componente Modal después del cierre, todavía se procesa y en mi caso da error porque el modal.data se vuelve null tan pronto como presiono el botón de cerrar desde el modal, enviando null en el Modal , causando error.
No puedo estar seguro sobre el resto de su código, pero parece que tiene demasiadas cosas en marcha. Puede ver en su ejemplo de sandbox una forma limpia de animar un modal dentro y fuera.
<CSSTransition in={modal.status && modal.state === 'MEDIA_INFO_MODAL'} timeout={200} classNames="my-node" unmountOnExit \> <Modal modalClicker={modalHandler}>{modal?.data}</Modal> </CSSTransition>No conozco una razón para pasar una referencia de la transición al elemento, así que la eliminé. Este método exacto es cómo hago todos mis modales con react-transition-group.
Además, cuando accede a las propiedades de un objeto que cambia de estado a y desde nulo, es mejor usar el encadenamiento opcional al referirse a él.
P.ej
modal?.dataEs azúcar sintáctico para verificar si un objeto existe antes de acceder a sus propiedades.
Si es absolutamente necesario mantener el componente renderizado, deberá eliminar unmountOnExit , pero de acuerdo con su problema descrito:
modal.data se vuelve nulo tan pronto como presiono el botón de cerrar
entonces su problema debe resolverse mediante el encadenamiento opcional. Si mantiene el componente montado, probablemente necesitará ocultarlo con css, o asegurarse de que solo haya contenido nulo dentro del componente Modal .