Почему это вызывает бесконечный цикл? Я не понимаю

Question

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

newTimestamp обновляется каждую секунду в зависимости от секунд, прошедших в ReactPlayer.

Как предотвратить бесконечную петлю в этой ситуации?

Это мой код:

import React, { Component } from 'react'; 
 
import { Modal, Button, Tooltip, Link, ControlLabel } from 'react-bootstrap'; 
 

 

 
export class CommentsModalAdmin extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     showModal: false, 
 
    }; 
 

 
    this.close = this.close.bind(this); 
 
    this.open = this.open.bind(this); 
 
    } 
 

 
    componentWillReceiveProps(props){ 
 
    const newTimestamp = this.props.newTimestamp; 
 
    const timestamp = this.props.comment.timestamp; 
 
    if (newTimestamp === timestamp){ 
 
     this.setState({ showModal: true }); 
 
     this.props.stopVideo(); 
 
    } 
 
    } 
 

 

 
    close() { 
 
    this.setState({ showModal: false }); 
 
    this.props.playVideo(); 
 
    } 
 

 
    open() { 
 
    this.setState({ showModal: true }); 
 
    this.props.stopVideo(); 
 

 

 
    } 
 

 
    render() { 
 
    const { newTimestamp, city, person, location, title, content, fileLink, timestamp } = this.props.comment; 
 

 

 

 
    return (
 
     <div className="flex"> 
 
     <a onClick={this.open}><span className="modal-bg"><span style={{ height: rand }} className="modal-color" ></span></span></a> 
 

 
     <Modal show={this.state.showModal} onHide={this.close} bsSize="lg"> 
 
      <Modal.Header closeButton> 
 
      <Modal.Title >{title}</Modal.Title> 
 
      </Modal.Header> 
 
      <Modal.Body> 
 
      <p><ControlLabel>Tagged city: </ControlLabel> {city}</p> 
 
      <p><ControlLabel>Tagged person: </ControlLabel> {person}</p> 
 
      <p><ControlLabel>Tagged location: </ControlLabel> {location}</p> 
 
      <p><ControlLabel>Tagged image: </ControlLabel></p> 
 
      <img src={fileLink} width="100%"/> 
 
      <ControlLabel>Tagged content: </ControlLabel> <div dangerouslySetInnerHTML={{__html: content}} /> 
 

 

 
      </Modal.Body> 
 
      <Modal.Footer> 
 
      <Button onClick={this.close}>Close</Button> 
 
      </Modal.Footer> 
 
     </Modal> 
 
     </div> 
 
    ); 
 
    } 
 
}

Эти сообщения об ошибках, которые я вижу: "Uncaught RangeError: Максимальный размер стека вызовов превысил"

И

"Warning: performUpdateIfNecessary: ​​Неожиданный номер партии (текущий 3200, ожидающий 178 3 "

Я обнаружил, что добавление this.props.stopVideo(); вызвал цикл, но я не понимаю, почему. Кто-нибудь может объяснить?

Answer 1

мне удалось решить эту проблему путем добавления дополнительного если/другое состояние, как это:

componentWillReceiveProps(nextProps){ 
 
    const newTimestamp = this.props.newTimestamp; 
 
    const timestamp = this.props.comment.timestamp; 
 
    if(nextProps !== this.props){ 
 
     if(this.state.showModal === false){ 
 
     if (newTimestamp === timestamp){ 
 
      this.setState({ showModal: true }); 
 
      this.props.stopVideo(); 
 
     } 
 
     } 
 
    } 
 
    }

Надеется, что это может помочь любому с Двойники проблемой.

Answer 2

Вы используете метод componentWillReceiveProps. Этот метод выполняется каждый раз, когда компонент получает новые (или любые) реквизиты. Внутри этого метода вы вызываете функцию, вызываемую в родительском компоненте компонента, которая в свою очередь запускает другую функцию, которая использует setState.

componentWillReceiveProps(props) { 
    // ... 
    this.props.stopVideo(); 
} 

setState вызывает повторную визуализацию, и, следовательно, также CommentsModalAdmin повторно оказанный и componentWillReceiveProps называется. Это приводит к циклу.

Возможно, вы захотите пересмотреть этот метод (или проверить, действительно ли реквизит изменился с чем-то вроде props == this.props).