React-redux error: Failed to execute 'removeChild' on 'Node'

programming web dev
1

Hi ,

When handling the asynchronous request with react and redux , i am facing some issues . So when i make a ajax request till the request gets completed we need to render the default state . so when the request is completed the state is updated in the redux store and the app re-renders . Now what i am facing is that ,

  1. till the request gets completed , state is null - render as loading
  2. if the response is an empty [ ] - then render saying the details are not found for this id .
  3. if the response is not an empty array - then render the details .

How to handle the step 2 , i am getting the error at step 2 . “DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.”

This is my repo , https://github.com/shyam2794/Agri.git .

Thanks .

2

@Shyam_Prasath I moved your post to its own topic since its a question specific to your project and not the Data to UI article directly.

I’ve looked at it briefly myself, and it does seem a little puzzling. When I get a chance I’m going to look at it a bit more and see if I can figure out what’s going on.

… but for now, if you remove or rename the "fas" class from your spinner, does that help?

3

Ok, I took some time to look at this in more detail this morning I think I see what’s going on. The fas fa-spinner class(es) seems to be doing something where it replaces the element with a SVG spinner in the DOM.

image

You can see the original node there in an HTML comment. And because this is messing with the DOM outside of react, when react tries to resolve the DOM with its own internal representation, things go whackadoo.

To combat this, you can add the element dynamically in a way that react won’t try to remove it. To do that, you can do something like this:

<div className="loading">
  <h4 ref={ el => this.h4 = el }>Loading </h4>
</div>

This is in render for the loading JSX. The change is that the spinner <i> is removed completely and we’ve added a ref to the parent <h4>.

Now in componentDidMount we can add that <i> back in.

  componentDidMount()
  {
    // ...
    var spinner = document.createElement('i');
    spinner.className = 'fas fa-spinner';
    this.h4.appendChild(spinner);
  }

Because this isn’t in the JSX, react won’t try to find and remove it with render updates - which is what we want because it won’t exist after it gets replaced by the spinner. But, this element will get removed with its parent <h4> when react ultimately removes that in a subsequent render update, so it’s not like this unmanaged element will be hanging around indefinitely.