Открыть модал при загрузке страницы, что привело к превышению максимальной глубины обновления - PullRequest
Новая
       20

Открыть модал при загрузке страницы, что привело к превышению максимальной глубины обновления

0 голосов
/ 04 апреля 2019

Я пытаюсь открыть модал при загрузке страницы, но получаю Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Я знаю, почему это происходит, потому что об этом много сообщений.Я не знаю, как это исправить.

Я использую UI материала модальный

Я пытался загрузить его в componentDidMount - ошибка вызвана,Я пытался также использовать onClick и симулировать щелчок, чтобы открыть его, но это не сработало - не смог заставить симуляцию работать.Ниже моя последняя попытка - вызванная ошибка. 

<Button onLoad={this.openModal.bind(this)()}>Open Modal</Button>

openModal(e) {
     this.setState({
      open:true
     })
  }

Кажется, я не могу обойти ошибку и открыть модальное при загрузке.

В модальном файле сам модальный выглядитвот так: 

 <Button onLoad={this.openModal.bind(this)()}>Open Modal</Button>
 <Modal
         aria-labelledby="simple-modal-title"
         aria-describedby="simple-modal-description"
         open={this.state.open}
         onClose={this.handleClose}
    >

В родительском компоненте 

   <Modal open={this.state.modalState}/> //=> true

Я тоже это попробовал (с удаленным обработчиком событий, который не вызывается this.openModal.bind(this)()).Получил ошибку 

componentDidUpdate(){
  this.setState({
      open:this.props.open
    })
 }

1 Ответ

0 голосов
/ 04 апреля 2019

Как правило, для рендеринга модального окна мы будем использовать состояние, указывающее его открытое или закрытое. Если вы хотите открыть модальное сразу после загрузки компонента, вы можете указать открытое состояние как истинное по умолчанию

например 

  Class Example extends React.component {
  construtor(props) {
  super(props)
 this.state = { open: true }
}
render() {
return <Modal open={this.state.open}>{//body goes here}</Modal>
}
}

По умолчанию открывается модальный режим, и вы можете переключать его в зависимости от ваших требований

Вы вызываете setstate в componentdidupdate без каких-либо условий, это приведет к слишком глубокой ошибке на уровне стека, так как после установки снова будет вызван componentwillupdate

Если вы хотите, вы можете использовать componentdidmount вместо

...