react: [React v15.0.2] - The node to be removed is not a child of this node.

Hi I had a simple code like this. After upgrading to React v15.0.2, whenever I click the link I got this message:

  • Uncaught NotFoundError: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.
  • from this function
function removeChild(parentNode, childNode) {
  if (Array.isArray(childNode)) {
    var closingComment = childNode[1];
    childNode = childNode[0];
    removeDelimitedText(parentNode, childNode, closingComment);
    parentNode.removeChild(closingComment);
  }
  parentNode.removeChild(childNode);
}
  • Here is my code:
  1. Component.js
onDispatchClick(event) {
   event.preventDefault();

   AppDispatcher.dispatch({
        type: RoutePickupConstants.DISPATCHING_RUNSHEET,
        routeId
   });

   api.dispatch(this.props.route.id).then(() => {
        AppDispatcher.dispatch({
            type: RoutePickupConstants.DISPATCHING_RUNSHEET_SUCCESS,
            routeId: this.props.route.id
        });
   });
}

getDispatchLink(route) {
    if (route.isDispatching) {
        dispatchLink = (
            <span>
                Dispatching...
            </span>
        );
    } else {
        dispatchLink = (
            <a href="#" onClick={this.onDispatchClick.bind(this)} className="action-link">
                Dispatch
            </a>
        );
    }

    return dispatchLink;
}


render() {
    let route = this.props.route;

    return (
        <tr>
            <td>{route.id}<td>
            <td>{this.getDispatchLink(route)}</td>
        </tr>
    )
}
  1. Store.js
case RoutePickupConstants.DISPATCHING_RUNSHEET:

    routes.get(action.routeId).isDispatching = true;

    this.emitChange();
    break;

case RoutePickupConstants.DISPATCHING_RUNSHEET_SUCCESS:

    routes.get(action.routeId).isDispatching = false;

    this.emitChange();
    break;

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 15 (8 by maintainers)

Most upvoted comments

I have the same error. and solved it!

when I create a class Table named MFTbale, and used it in other page.like this:

render(){
<div>
……
<MFTable/>
……
</div>
}

some time I need hide MFTable. so. I guess, React remove it, but got a misttake. I changed it

render(){
<div>
……
<div> <MFTable/></div>
……
</div>
}

well done.

This issue happens because I am using JQuery to add some additional Dom to React Dom.

That’s not allowed.

@swlilike Thanks, solved my issue by wrapping the component in a div like below.

render() {
  return (
    <div>
      <Modal>...</Modal>
    </div>
  );
}

Probably the error was because the DOM nodes generated by my Modal component appended themselves to the body instead of parent element.

@zpao
I posted this issue because It happened after I upgraded React from 0.14 to 0.15. Now I understood more. Thanks for your time !

That makes sense, thanks for the explanation. (assuming the above was directed to me 😃)

@alexzherdev It’s OK to modify the content of empty React nodes. You may not mess with the hierarchy rendered by React as there is no way for React to figure out how to correctly apply updates to your modified hierarchy.

I’m honestly not sure if it’s explicitly stated somewhere in the docs, but this is a limitation that applies to all frameworks really.