Estoy usando React y renderizando un modal desde Material UI. La forma en que se representa el modal tiene que ser parte del cuerpo del código. Así que lo agregué al final de la página. El estado determina si el modal está abierto o no. El problema es que puedo ver que una función que está en el modal se llama varias veces. Y muy rápidamente. Como más de una vez cada segundo. Por favor vea mi código:

 class ComponentName extends React.Component { constructor(props) { super(props); this.state = { countries: [], isButtonDisabled: false, formError: false, showModalCta: false, showModal: false, iframeUrl: '' }; } handleClose = () => { this.setState({ showModal: false }); }; handleShowModal = () => { this.setState({ showModal: true }) } showModalContent = () => { const { classes } = this.props; const { iframeUrl } = this.state; getiframeUrl().then((res) => { this.setState({ iframeUrl: res.level2VerificationUrl }); }); return ( <Paper className={classes.modalPaper}> <iframe src={iframeUrl} width="500px" height="500px" /> </Paper> ); }; render() { const { classes, history, firstName, lastName, country, region, address, city, dob, phone, smsCode, postalCode, actions } = this.props; const { countries, formError, isButtonDisabled, showCta, showModal } = this.state; return ( <div> <Modal className={classes.modal} open={showModal} onClose={this.handleClose}> {this.showModalContent()} </Modal> </div> ); } }

Prácticamente llama a esa función para obtener la URL cada segundo. Pero no entiendo muy bien por qué este es el comportamiento. He estado investigando sobre esto pero no hay respuestas. hay alguna forma de prevenir esto? ¡Gracias!