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!
showModalContent se ejecutará en cada "cambio de estado" del componente (en cada renderizado). Allí (por lo que veo) estás haciendo una llamada a una promesa (getiframeUrl) y estás configurando el estado del componente (lo que hace que cambie de estado).
Por lo tanto: Render -> showModalContent -> cambiar estado -> volver a renderizar -> showModalContent -> ... (bucle infinito).
Mi consejo es que hagas setState de iframeUrl solo en el componenteDidMount. Algo como esto:
componentDidMount() { const { iframeUrl } = this.state; getiframeUrl().then((res) => { this.setState({ iframeUrl: res.level2VerificationUrl }); }); } showModalContent = () => { const { classes } = this.props; return ( <Paper className={classes.modalPaper}> <iframe src={iframeUrl} width="500px" height="500px" /> </Paper> ); };