CODEWITHSUNDEEP
javascriptajaxreactjsecmascript-6
t7bdh3hdhb
t7bdh3hdhb

Reputation: 438

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?

Upvotes: 1

Views: 511

Answers (1)

BradByte
BradByte

Reputation: 11093

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.

Upvotes: 1

Related Questions