Warum verursacht dies eine Endlosschleife? Ich verstehe nicht

Question

Im Moment tut der Code, was ich will, aber es stürzt auch meine Anwendung ab. Ich denke, es ist wegen einer Endlosschleife, aber ich bin mir nicht sicher. Ich möchte, dass der Code die zwei Variablen überprüft, wenn einer gleich dem anderen ist, möchte ich den Zustand des Modals ändern.

newTimestamp wird jede Sekunde basierend auf den Sekunden in ReactPlayer erneuert.

Wie kann ich in dieser Situation eine Endlosschleife verhindern?

Dies ist mein Code:

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> 
 
    ); 
 
    } 
 
}

Dies sind die Fehlermeldungen sehe ich: "Uncaught Auslöser Range: Maximale Call-Stack-Größe überschritten"

Und

"Warnung: performUpdateIfNecessary: ​​Unerwartete Chargennummer (aktuell 3200, ausstehende 178 3 "

Ich habe festgestellt, dass this.props.stopVideo(); verursachte die Schleife, aber ich verstehe nicht warum. Wer kann es erklären?

Answer 1

konnte ich dieses Problem zu lösen, indem eine zusätzliche Zugabe:

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(); 
 
     } 
 
     } 
 
    } 
 
    }

Hoffe, dass es jemand mit einem simular Problem helfen kann.

Answer 2

Sie verwenden die componentWillReceiveProps Methode. Diese Methode wird jedes Mal ausgeführt, wenn die Komponente neue (oder irgendwelche) Requisiten empfängt. Innerhalb dieser Methode triggern Sie eine Funktion, die im Elternelement der Komponente aufgerufen wird, die wiederum eine andere Funktion auslöst, die setState verwendet.

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

setState verursacht eine erneute machen, und damit auch die CommentsModalAdmin wird neu gemacht und componentWillReceiveProps genannt wird. Dies führt zu der Schleife.

Vielleicht möchten Sie diese Methode überarbeiten (oder prüfen, ob sich die Requisiten tatsächlich mit etwas wie props == this.props geändert haben). if/else Bedingung wie diese