我有一个div
,其中三个div
内附加如下。通过循环来自componentWillReceiveProps()
的api的结果来设置状态值。但是我遇到了一个错误的问题
Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node
如果api结果为null,则获取
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
我该如何解决这个问题?
componentWillReceiveProps(nextProps) {
var sub1 = [], sub2 = [], sub3 = [];
if(result) {
result.sub1.map((item, index) => {
sub1.push(
<div>
<p>{item.name}</p>
</div>
)
})
result.sub2.map((item, index) => {
sub2.push(
<div>
<p>{item.name}</p>
</div>
)
})
result.sub3.map((item, index) => {
sub3.push(
<div>
<p>{item.name}</p>
</div>
)
})
this.setState({ subDiv1:sub1, subDiv2:sub2, subDiv3:sub3 })
}
}
render() {
return(
<div className="row top_bar">
<div className="search left col-xs-5 col-sm-4 col-md-5 col-lg-6">
<form>
<input type="text" id="search_box" name="search_box" placeholder="Search" onKeyUp={this.keyUpFn} />
</form>
<div className="div1">
{ this.state.subDiv1 }
{ this.state.subDiv2 }
{ this.state.subDiv3 }
</div>
</div>
<div className="top_right col-xs-7 col-sm-8 col-md-7 col-lg-6">
<div className="top_outer">
</div>
</div>
</div>
)
}
答案 0 :(得分:6)
我认为这是失败的,因为您正在render方法之外进行渲染。我也遇到了这个问题,这是因为我的render方法中有如下代码:
<div id="myContent">
{this.getMyContentFromAChildClass()}
</div>
然后在该类的其他地方,我使用了第三方库SimpleBar,使用JQuery向div添加滚动条,如下所示:
const myContentElement = $("#myContent")[0];
if (!this.scrollbar && myContentElement) {
this.scrollbar = new SimpleBar(myContentElement, {autoHide: false});
}
SimpleBar在混合中添加了它自己的div,当React尝试渲染{this.getMyContentFromAChildClass()
时,很困惑在哪里添加它,我得到了上面的错误消息。
解决方法是不直接修改父div:
<div id="myContent">
<div id="addingThisExtraDivIsTheFix"> <-- Add This
{this.getMyContentFromAChildClass()}
</div>
</div>
答案 1 :(得分:0)
有时候,当用户使用Google Translate时,它会发生变化,它会改变文本节点,并在下一次渲染时React中断。 更多信息以及解决方法: https://github.com/facebook/react/issues/11538#issuecomment-390386520