Question

我正在尝试映射我从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.

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

Answer 1

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

Answer 2

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

您正在使用simplebar插件，该插件会更改DOM树并破坏React。尝试将包用于React'simplebar-react'，它可以正常工作。

import SimpleBar from 'simplebar-react';

<SimpleBar>
    ...
</SimpleBar>

Documentation

Example

Answer 3

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

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

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

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

反应错误：无法在“节点”上执行“insertBefore”：插入新节点的节点不是此节点的子节点

3 个答案: