これはなぜエンドレスループを引き起こすのですか？私は理解していません

Question

現時点ではコードは私がやりたいことをしますが、私のアプリケーションもクラッシュします。私はそれが無限ループのためだと思うが、わからない。 2つの変数をチェックするようにコードを設定したい場合は、1つが他と等しい場合は、モーダルの状態を変更する必要があります。

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

これらは私が表示されるエラーメッセージです： ：

そして

"をキャッチされない例外RangeError最大コールスタックサイズを超えて" "警告：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のように変更されているかどうかを確認することができます。私はこのような/他の場合、余分な状態追加することによってこの問題を解決するために管理