反应错误：无法在'Node'上执行'insertBefore'：要插入新节点的节点不是该节点的子节点答案

【问题标题】：React error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node反应错误：无法在'Node'上执行'insertBefore'：要插入新节点的节点不是该节点的子节点
【发布时间】：2021-08-22 22:28:12
【问题描述】：

我正在尝试映射从 api 调用获得的响应。我想在这张地图中渲染 div。这就是我的代码的样子

<div data-simplebar className="img-scroll">
    {this.state.imageSearchResults.items.map((item, ind) => {
        return <div className="image-square" style={{backgroundImage:`url(${this.state.imageSearchResults.items[0].link})`}}></div>
    })}
</div>

我收到一个错误提示

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

这有什么问题？我过去也做过同样的映射，从来没有出现过这样的错误。

【问题讨论】：

我遇到了同样的问题，但在我的情况下，这是因为父 DIV 有其他元素，这不是 map 函数的结果。我创建了一个内部 DIV 并将 map 包含在其中，然后错误就消失了。

标签： javascript reactjs

【解决方案1】：

<div data-simplebar className="img-scroll">

你正在使用 simplebar 插件，它改变了 DOM 树并破坏了 React。尝试使用 React 'simplebar-react' 的包，它可以正常工作。

import SimpleBar from 'simplebar-react';

<SimpleBar>
    ...
</SimpleBar>

Documentation

Example

【讨论】：

【解决方案2】：

如果有人在谷歌浏览器中翻译页面时偶然发现了这个问题，很可能与此有关：

https://github.com/facebook/react/issues/11538

Chrome 团队尚未解决的老问题。

https://bugs.chromium.org/p/chromium/issues/detail?id=872770

【讨论】：

很好。有点同样的问题，你的回答有帮助

【解决方案3】：

整理<p> or <span> 中的可翻译文本为我解决了问题

【讨论】：

【解决方案4】：

请给孩子们添加一个合理的key道具。

【讨论】：