我使用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} />