javascript - react : Error on props update from parent (Failed to execute removeChild)

Question

我正在使用 React 和 ajax 来获取列表的数据。第一次初始化后，执行 componentWillReceiveProps(nextProps) 时，我总是收到以下错误。当 ajax 的 URL 更改时，就会发生这种情况。

未捕获NotFoundError:无法在“Node”上执行“removeChild”:要删除的节点不是此节点的子节点。

这是代码:

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

有什么想法吗？

Answer 1

由于问题出在 CustomDataTable 上，您可以尝试进一步解析以调试问题，但在看不到代码的情况下，我唯一建议的就是强制卸载该数据URL 更改时的组件。

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

这应该会导致组件在 key 发生变化时重新安装。