Al pasar contenido dinámico a una hoja inferior modal de iones, en lugar de actualizar el contenido en la hoja inferior, se representa una nueva hoja inferior encima de la anterior, lo que eventualmente lleva a una carga de modales uno encima del otro.

Creo que este es un problema modal de iones y no específicamente la hoja inferior.

El contenido se actualiza cuando un usuario navega a una nueva ruta de URL, por lo que puede ser un problema de navegación o tener que ver con la actualización del contenido. De cualquier manera, puede continuar agregando modales aparentemente infinitamente, aunque el componente ModalDrawer a continuación solo se llama una vez, lo que no es el comportamiento esperado.

Aquí está el código:

 import React from 'react'; import { IonModal } from '@ionic/react'; import DrawerContent from '../DrawerContent'; import { useLocation } from 'react-router'; interface PageProps { isOpen: boolean; isMobile: boolean; selectedLocation: any; emissionsData: {id: string, name: string, emissions: string[]}[]; entitiesByBusinessType: object[]; } const MobileDrawer: React.FC<PageProps> = (props) => { const location = useLocation() const modalSubject = props.entitiesByBusinessType || location.pathname === props.emissionsData[0].id ? ( <DrawerContent entitiesByBusinessType={props.entitiesByBusinessType} emissionsData={props.emissionsData} isOpen={props.isOpen} isMobile={props.isMobile} /> ) : null return ( <div> <IonModal isOpen={true} swipeToClose={true} breakpoints={[ 0.05, 0.4, 0.95 ]} initialBreakpoint={0.4} backdropBreakpoint={0.4} className="bottom-sheet" showBackdrop={true} backdropDismiss={false} children={modalSubject} /> </div> ); }; export default MobileDrawer;

Aquí hay algunas imágenes para explicar mejor mi punto:

Cómo debe actuar la aplicación (1 hoja inferior): Comportamiento normal de la aplicación

Aplicación con varias hojas inferiores/modales una encima de la otra: Aplicación con 2 modales apilados Aplicación con 3 modales apilados