从父元素更新道具时出错(执行removeChild失败)

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

本文关键字：执行 removeChild 失败 出错 元素 更新      更新时间：2023-09-26

我使用react和ajax来获取列表的数据。在第一次init之后，当componentWillReceiveProps(nextProps)执行时，我总是得到以下错误。当ajax的URL改变时，就会发生这种情况。

未捕获NotFoundError: Failed to execute 'removeChild' on 'Node:要删除的节点不是此节点的子节点。

代码如下:

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} />

任何想法?

由于问题与CustomDataTable有关，您可以尝试在那里进一步解析以调试问题，但没有看到代码，我唯一可以推荐的是在URL更改时强制卸载该组件。

<CustomDataTable key={this.props.url} data={this.state.data} />
相关文章：