在小屏幕尺寸上超出最大更新深度

Question

我面临一个非常奇怪的错误。我在Next.js应用程序中使用reactstrap。模式在桌面屏幕尺寸上完全打开。但是，只要我将屏幕宽度减小到小于478px，我就会在切换模态时开始出现此错误：

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.

模态代码：

<Modal isOpen={this.state.showAddRumourModal} toggle={this.toggleAddRumourModal.bind(this)} size="lg">
    <ModalBody>
      <div className="rumour-input">
        <label>
          <span>*</span> Rumour/Speculation <span className="extra-info">( max 400 charachters )</span>
        </label>
        <textarea maxLength="400" ref={this.rumourTextRef}>
        </textarea>
      </div>
      <div className="rumour-tags">
        <label>
          <span>*</span> Tags
        </label>
        <ReactTags tags={this.state.inputTags} suggestions={[]} handleDelete={this.handleInputTagDeletion.bind(this)}
        allowNew={true} handleAddition={this.handleInputTagAddition.bind(this)}/>
      </div>
      <button id="new-rumour-btn" onClick={this.submitRumour.bind(this)}>
        Submit
      </button>
      <style jsx>
        {`
          .rumour-input label, .rumour-tags label {
            display: block;
          }

          .rumour-input label>span, .rumour-tags label>span {
            color: red;
          }

          .rumour-tags {
            margin-top: 10px;
          }

          .rumour-input textarea {
            width: 100%;
            border: 1px solid #EAEAEA;
            border-radius: 2px;
            height: 120px;
            font-size: 14px !important;
            padding: 10px;
            font-weight: 300;
          }

          .rumour-input textarea:focus {
            outline: none;
          }

          .rumour-info-text {
            margin-bottom: 10px;
            font-size: 18px;
          }

          .extra-info {
            font-weight: 300;
            font-size: 13px;
            color: black !important;
          }

          #new-rumour-btn {
            border-radius: 2px;
            text-transform: uppercase;
            font-size: 14px;
            padding: 8px 27px;
            color: white;
            font-weight: 100;
            background-color: #160C35;
            cursor: pointer;
            margin-top: 20px;
          }

          @media screen and (max-width: 520px) {

            .rumour-info-text {
              font-size: 14px;
            }

            .extra-info {
              font-size: 11px;
            }

            .rumour-input label, .rumour-tags label {
              font-size: 12px;
            }

            #new-rumour-btn {
              font-size: 12px;
              padding: 4px 18px;
              margin-top: 10px;
            }
          }
        `}
      </style>
    </ModalBody>
  </Modal>

我使用按钮切换它

<button id="add-btn" onClick={this.toggleAddRumourModal.bind(this)}>
   + add
</button>

切换功能

toggleAddRumourModal() {
this.setState({
  showAddRumourModal: !this.state.showAddRumourModal,
  inputTags: []
});

}

根据我的经验以及我用Google搜索的内容，当代码中存在无限循环时会发生此错误，其中一个正在渲染方法中执行更新状态操作，这再次导致渲染。