Question

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

未捕获NotFoundError：无法在“节点”上执行“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，你可以尝试在那里进一步解析以调试问题，但是没有看到代码，我唯一可以推荐的是强制卸载该组件网址更改。

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

这会导致组件在密钥更改时重新安装。

React：来自父级的道具更新错误（无法执行removeChild）

1 个答案: