Question

我正在使用React，我遇到了问题。

推送路由器时出现未捕获的DOMException。

当我将一个新URL推入路由器时，只有从模态组件中的按钮触发事件，否则（不是从模态触发的事件）路由器运行良好。

我想做的完整程序如下。

“内容视图”页面上有一个“删除”按钮。

如果点击“删除”按钮，则会显示“确认模式”。

如果我点击'确认模式'上的'确认'按钮，内容将被删除并移至'列表视图'。

我的例外在删除内容后立即发生。

Belows是我的源代码。

'删除'按钮：

<button key={keygen._()} className="btn btn-info btn-xs" style={{ marginRight: '4px' }} onClick={this._handleOnClickDel}>
        <i className="fa fa-eraser"></i> DELETE
</button>

'_ handleOnClickDel'功能：

_handleOnClickDel(e) {
  e.target.disabled = true;
  this.setState({
    showMessageModal: true, // this shows 'confirm modal'
  });
}

'确认模态'组件：

<MessageModal
  message="Are you sure?"
  show={this.state.showMessageModal}
  cancelBtnTxt="CANCEL"
  confirmBtnTxt="CONFIRM"
  onConfirmClick={this._handleOnConfirmDelClick}
  close={this._hideMessageModal}
/>

'_ handleOnConfirmDelClick'功能：

_handleOnConfirmDelClick(e) {
  e.preventDefault();
  deleteById(this.props.params.boardId) // this deletes the content from DB
  .then(() => {
    this.context.router.push(`/community/${this.state.type}`);
  });
}

浏览器控制台上的完整异常消息如下所示。

Portal.js？8f33：75未捕获（在promise中）DOMException：无法在“Node”上执行“removeChild”：要删除的节点不是此节点的子节点。在Constructor._unmountOverlayTarget（eval at（http://localhost:8000/dist/bundle.js:4284:2），：75：33）在Constructor.componentWillUnmount（eval at（http://localhost:8000/dist/bundle.js:4284:2），：62：10）在ReactCompositeComponentWrapper.unmountComponent（eval at（http://localhost:8000/dist/bundle.js:3138:2），：395：14） at Object.unmountComponent（eval at（http://localhost:8000/dist/bundle.js:2790:2）,: 80:22）在ReactCompositeComponentWrapper.unmountComponent（eval at（http://localhost:8000/dist/bundle.js:3138:2）,:405：23） at Object.unmountComponent（eval at（http://localhost:8000/dist/bundle.js:2790:2）,: 80:22）在ReactCompositeComponentWrapper.unmountComponent（eval at（http://localhost:8000/dist/bundle.js:3138:2）,:405：23） at Object.unmountComponent（eval at（http://localhost:8000/dist/bundle.js:2790:2）,: 80:22）在Object.unmountChildren（eval at（http://localhost:8000/dist/bundle.js:3126:2），：118：25）在ReactDOMComponent.unmountChildren（eval at（http://localhost:8000/dist/bundle.js:3114:2），：346：28）

答案将非常感谢。

Answer 1

您需要明确地绑定this从模态调用_handleOnConfirmDelClick方法，因此请将其更改为：

onConfirmClick={this._handleOnConfirmDelClick}

为：

onConfirmClick={this._handleOnConfirmDelClick.bind(this)}

并且方法本身是：

_handleOnConfirmDelClick(e, this) {
  var self = this;
  e.preventDefault();
  deleteById(this.props.params.boardId) // this deletes the content from DB
  .then(() => {
    self.context.router.push(`/community/${this.state.type}`);
  });
}

要了解有关在ReactJS中绑定javascript this的详情，请参阅here。

推送路由器时未捕获（在promise中）DOMException

1 个答案: