推送路由器时未捕获（承诺）DOMException

Question

I'm doing something with React, and I'm in a problem.

Uncaught DOMException is occuring when pushing router.

It occurs when I push a new URL into router with only an event triggered from a button in modal component, otherwise(not an event triggered from a modal) the router works well.

Full procedure that I'd like to do is like below.

1. There's a 'delete' button on the 'content view' page.
2. If I click 'delete' button, 'confirm modal' appears.
3. If I click 'confirm' button on 'confirm modal', the content is deleted and move to 'list view'.

My Exception occurs right after deleting content.

Belows are my source codes.

'delete' button:

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

'_handleOnClickDel' function:

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

'confirm modal' component:

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

'_handleOnConfirmDelClick' function:

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

The full exception message on browser console is like below.

Portal.js?8f33:75 Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at Constructor._unmountOverlayTarget (eval at ( http://localhost:8000/dist/bundle.js:4284:2 ), :75:33) at Constructor.componentWillUnmount (eval at ( http://localhost:8000/dist/bundle.js:4284:2 ), :62:10) at 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) at 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) at 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) at Object.unmountChildren (eval at ( http://localhost:8000/dist/bundle.js:3126:2 ), :118:25) at ReactDOMComponent.unmountChildren (eval at ( http://localhost:8000 /dist/bundle.js:3114:2 ), :346:28)

Answer will be very appreciated.

Answer 1

You need to bind this explicitly on invoking _handleOnConfirmDelClick method from modal, so change it from:

onConfirmClick={this._handleOnConfirmDelClick}

to:

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

and the method itself to be:

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

To read more about binding javascript this in ReactJS, see here .