javascript - react 错误 : Failed to execute 'insertBefore' on 'Node' : The node before which the new node is to be inserted is not a child of this node

Question

我正在尝试映射我从 api 调用中获得的响应。我想在此 map 中渲染 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

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

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

import SimpleBar from 'simplebar-react';

<SimpleBar>
    ...
</SimpleBar>

Documentation

Example