t7bdh3hdhb t7bdh3hdhb - 1 year ago 177
React JSX Question

React: Error on props update from parent (Failed to execute removeChild)

I'm using react and ajax to fetch data for a list. After first init I always get the following error when

componentWillReceiveProps(nextProps)
is executed. This happens when the URL for the ajax changed.

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Here is the code:

class QuickList extends React.Component{
constructor(props) {
super(props);

// set initial data to empty array
this.state = {
data: []
}

}

_loadQuickListDataFromServer(url){
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
cache: false,
success: (data) => {
this.setState({data: data});
},
error: (xhr, status, err) => {
console.error(this.props.url, status, err.toString());
}
});
}


componentWillReceiveProps(nextProps) {
console.log('url: ', nextProps.url);
this._loadQuickListDataFromServer(nextProps.url);
}

componentWillMount(){
console.log('url: ', this.props.url);
// if component is mounted then fetch data from server
this._loadQuickListDataFromServer(this.props.url);
}

render() {
return (
<div className='container-fluid text-center'>
<div className='row'>
<div className='col-sm-12'>
<CustomDataTable data={this.state.data} />
</div>
</div>
</div>
);
}
}

// defined in return of other react component
<QuickList url={quickListURL} />


Any ideas?

Answer Source

Since the issue is with the CustomDataTable, you can try to parse in there further to debug the issue, but without seeing the code, the only thing I could recommend is to force an unmount of that component when the URL changes.

<CustomDataTable key={this.props.url} data={this.state.data} />

This should cause the component to remount whenever the key changes.