#javascript #reactjs #react-native #asynchronous #material-ui
Вопрос:
Я использую React и рендеринг модального интерфейса из материала. Способ визуализации модала заключается в том, что он должен быть частью основного текста кода. Поэтому я добавил его в нижнюю часть страницы. Состояние определяет, открыт ли модал или нет. Проблема в том, что я вижу, что функция, находящаяся в модальном режиме, вызывается несколько раз. И очень быстро. Например, более одного раза в секунду. Пожалуйста, ознакомьтесь с моим кодом:
class ComponentName extends React.Component { constructor(props) { super(props); this.state = { countries: [], isButtonDisabled: false, formError: false, showModalCta: false, showModal: false, iframeUrl: '' }; } handleClose = () =gt; { this.setState({ showModal: false }); }; handleShowModal = () =gt; { this.setState({ showModal: true }) } showModalContent = () =gt; { const { classes } = this.props; const { iframeUrl } = this.state; getiframeUrl().then((res) =gt; { this.setState({ iframeUrl: res.level2VerificationUrl }); }); return ( lt;Paper className={classes.modalPaper}gt; lt;iframe src={iframeUrl} width="500px" height="500px" /gt; lt;/Papergt; ); }; 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 ( lt;divgt; lt;Modal className={classes.modal} open={showModal} onClose={this.handleClose}gt; {this.showModalContent()} lt;/Modalgt; lt;/divgt; ); } } Это в значительной степени вызывает эту функцию, чтобы получать URL-адрес каждую секунду. Но я не совсем понимаю, почему такое поведение. Я проводил исследования по этому вопросу, но ответов нет. Есть ли какой-нибудь способ предотвратить это? Спасибо!
Комментарии:
1. Какая функция запускается повторно? Что такое
this.showModalContent()?2. У вас есть
this.setStateвызов функции визуализации (this.showModalContent). Это означает, что каждый раз, когда компонент выполняет рендеринг, он будет вызыватьthis.setState, что, в свою очередь, приведет к повторному запуску компонента, вызывающему бесконечный цикл.3. @JacobSmit Я приношу извинения за путаницу. Я случайно неправильно написал название функции. Я просто исправил это. Таким образом, он вызывает функцию «getiframeUrl», которая, как кажется, находится в функции стрелки «showModalContent» несколько раз. Но опять же, это может быть побочным эффектом вызова функции showModalContent необычным способом
4. Без дополнительной информации о том, как должен функционировать ваш компонент, мое первоначальное предложение состояло бы в том, чтобы загрузить URL-адрес iframe через
getiframeUrl()вcomponentDidMount()и удалить вызов изthis.showModalContent().
Ответ №1:
showModalContent будет выполняться при каждом «изменении состояния» компонента (при каждом рендеринге). Там (из того, что я вижу) вы вызываете обещание (getiframeUrl) и устанавливаете состояние компонента (что заставляет его изменять состояние).
Следовательно: Визуализация -gt; showModalContent -gt;gt; изменение состояния -gt;gt;gt; повторная визуализация -gt;gt;gt;gt; showModalContent -gt;gt;gt;gt;gt; … (бесконечный цикл).
Мой совет заключается в том, что вы выполняете setState iframeUrl только в компонентдидмоунте. Что-то вроде этого:
componentDidMount() { const { iframeUrl } = this.state; getiframeUrl().then((res) =gt; { this.setState({ iframeUrl: res.level2VerificationUrl }); }); } showModalContent = () =gt; { const { classes } = this.props; return ( lt;Paper className={classes.modalPaper}gt; lt;iframe src={iframeUrl} width="500px" height="500px" /gt; lt;/Papergt; ); };