He creado un componente modal que se abre onClick. Este componente utiliza una devolución de llamada de su componente principal que envía una acción desde su componente principal. El modal tiene una variable de estado llamada "abrir" que se usa para decidir si abrir o no el modal.
const handleOpen = () => { props.getDetails(props.dsaId?props.dsaId:props.triggerName) setOpen(open)};
La función handleOpen se llama cuando se hace clic en el botón. Como puede ver, setOpen cambia el valor [open] a true , que a su vez debería abrir el Modal.
props.getDetails(props.dsaId?props.dsaId:props.triggerName)se usa para enviar una acción en el componente principal, que a su vez pasará los datos como accesorios a mi componente secundario.
El problema es que cuando llamo a la función de devolución de llamada desde el componente secundario, la acción enviada en el componente principal hace que el principal se vuelva a procesar, lo que a su vez vuelve a generar la configuración del componente secundario [abierto] en falso nuevamente, lo que cierra el modal.
¿Cómo mantengo el modal abierto después de enviar la acción?
Puede mover el estado del modelo hasta el estado principal. Leer[Levantando el estado] .
Puede mantener el estado abierto de modal en el componente principal y pasarlo en los accesorios al componente secundario.
const Parent = () => { const [childModalOpen, setChildModalOpen] = useState(false); return ( <Child modalOpen={childModalOpen} onModalChange={(open) => setChildModalOpen(open)} {...otherProps} />); }; const Child = ({ modalOpen, onModalChange }) => { const [open, setOpen] = useState(open); useEffect(() => { setOpen(modalOpen); }, [modalOpen]); const handleOpen = () => { onModalChange(true); }; const handleClose = () => { onModalChange(close); }; return ( <Modal open={} onClose={handleClose}> {* children *} </Modal>); };