React JS - 未捕获的 NotFoundError：无法在“节点”上执行“insertBefore”：答案

【问题标题】：React JS - Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node':React JS - 未捕获的 NotFoundError：无法在“节点”上执行“insertBefore”：
【发布时间】：2021-03-26 17:32:24
【问题描述】：

我有一个div，其中另外三个divs 附加如下。状态值是通过循环来自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>
    )
}

【问题讨论】：

您能提供一个完整的可运行示例吗？此消息听起来像一个错误。
这只是我项目的一小部分。现在将其创建为可运行的示例并不困难。请不要难过
我认为应该在某处使用像insertbefore 这样的东西。我不知道在哪里使用它。你有什么想法吗？
我最好的猜测是你有一些与 React 生成的 DOM 混淆的代码，当 React 稍后尝试更新它时，它找不到节点。但是没有看到你的项目就很难说。通常，您显示的代码很奇怪。你真的不应该像这样使用 React。相反，渲染应该在 render 方法中完成。
这是从componentWillReceiveProps循环和设置状态并在渲染方法中使用状态值的错误方法吗？

标签： javascript reactjs redux

【解决方案1】：

有时当用户使用谷歌翻译时会发生这种情况，它会改变文本节点，并且 React 在下一次渲染时会中断。更多信息以及如何解决它： https://github.com/facebook/react/issues/11538#issuecomment-390386520

您还可以将下一个属性添加到 HTML 标记以禁用 Google 翻译并解决此问题：

<html class="notranslate" translate="no">

【讨论】：

【解决方案2】：

我认为这是失败的，因为您在渲染方法之外进行渲染。我也遇到了这个问题，这是因为我的渲染方法中有如下代码：

<div id="myContent">
  {this.getMyContentFromAChildClass()}
</div>

然后在课堂上的其他地方，我使用了第 3 方库 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>

【讨论】：

你是这个答案的传奇人物，已经尝试解决这个问题几个小时了，但是在父级中添加了一个额外的容器，我的代码现在可以工作了:)
很棒的答案：非常感谢您这样做！如果我们能够通过查看源/机制来真正理解在哪里添加它感到困惑，那将更加理想？