Question

目前代码完成了我想要它做的事情，但它也崩溃了我的应用程序。我认为这是因为无限循环，但我不确定。我希望代码检查两个变量，如果一个等于另一个，我想改变模态的状态。

根据ReactPlayer中传递的秒数，

newTimestamp每秒更新一次。

在这种情况下如何防止无限循环？

这是我的代码：

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，待定1783”

我发现添加this.props.stopVideo（）;引起了循环，但我不明白为什么。有谁能解释？

Answer 1

您正在使用componentWillReceiveProps方法。每次组件接收新（或任何）道具时，都会执行此方法。在该方法中，您触发一个在组件的父级中调用的函数，该函数反过来触发另一个使用setState的函数。

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

setState会导致重新渲染，因此也会重新呈现CommentsModalAdmin并调用componentWillReceiveProps。这导致循环。

您可能想要修改该方法（或检查道具是否实际更改了props == this.props）。

Answer 2

我设法通过添加一个额外的if / else条件来解决这个问题：

＆＃13;

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

＆＃13;

希望它可以帮助任何有类似问题的人。

为什么这会导致无限循环？我不明白

2 个答案: