React JS - Uncaught NotFoundError:无法在'Node'上执行'insertBefore':

时间:2018-06-10 13:43:52

标签: javascript reactjs redux

我有一个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>
    )
}

2 个答案:

答案 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