React NotFoundError：无法在'Node'上执行'insertBefore'：要插入新节点的节点不是该节点的子节点答案

【问题标题】：React NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this nodeReact NotFoundError：无法在'Node'上执行'insertBefore'：要插入新节点的节点不是该节点的子节点
【发布时间】：2019-03-03 22:11:34
【问题描述】：

当我在 React 内置的 Aframe 资产管理器中更新新资产时，我收到了这个 notFound 错误。

资产管理器组件是这样构建的：

export class Assets extends PureComponent{

  render(){

    const {
      hiResPanoUrl,
      onHiResPanoLoaded,
      sceneThumbnails = [],
      guideThumbnails = [],
      videos = [],
      sounds = [],
      models = [],
      panos = [],
      images = [],
    } = this.props


    return (
      <a-assets>
        {createHighResolutionPanoAsset(hiResPanoUrl, onHiResPanoLoaded)}
        {createPanoAssets(panos)}
        {createSceneThumbnailsAssets(sceneThumbnails)}
        {createGuideThumbnailsAssets(guideThumbnails)}
        {createAudioAssets(sounds)}
        {createVideoAssets(videos)}
        {createModelAssets(models)}
        {createImageAssets(images)}
      </a-assets>
    )
  }

声音资产是这样构建的

function createAudioAssets(sounds) {
  return sounds.map(sound => {
    const {url, id, preload} = sound

    if(!preload)
      return <audio key={id} {...{id}} src={url} crossOrigin='anonymous'/>
    return <audio key={id} {...{id}} src={url} crossOrigin='anonymous' preload="auto"/>
  })
}

这一切都很好，直到它得到一个新的声音，然后我得到这个错误：

react-dom.development.js:8613 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insertBefore (https://localhost:3000/static/js/bundle.js:284772:18)
    at commitPlacement (https://localhost:3000/static/js/bundle.js:290869:11)
    at commitAllHostEffects (https://localhost:3000/static/js/bundle.js:291546:11)
    at HTMLUnknownElement.callCallback (https://localhost:3000/static/js/bundle.js:276259:14)
    at Object.invokeGuardedCallbackDev (https://localhost:3000/static/js/bundle.js:276297:16)
    at invokeGuardedCallback (https://localhost:3000/static/js/bundle.js:276346:29)
    at commitRoot (https://localhost:3000/static/js/bundle.js:291728:7)
    at completeRoot (https://localhost:3000/static/js/bundle.js:292778:34)
    at performWorkOnRoot (https://localhost:3000/static/js/bundle.js:292723:9)
    at performWork (https://localhost:3000/static/js/bundle.js:292642:7)
    at performSyncWork (https://localhost:3000/static/js/bundle.js:292614:3)
    at requestWork (https://localhost:3000/static/js/bundle.js:292514:5)
    at scheduleWork$1 (https://localhost:3000/static/js/bundle.js:292378:11)
    at Object.enqueueSetState (https://localhost:3000/static/js/bundle.js:287459:5)
    at ProxyComponent../node_modules/react/cjs/react.development.js.Component.setState (https://localhost:3000/static/js/bundle.js:339510:16)

这是由 Redux 中的更新引起的。

任何线索是什么问题？

【问题讨论】：

标签： reactjs aframe

【解决方案1】：

很可能是 React 外部的东西在弄乱你的 DOM。

可以是：

页面中使用的外部库
一个像谷歌翻译一样改变 DOM 的浏览器扩展：https://github.com/facebook/react/issues/11538

【讨论】：