Question

当我在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中的更新引起的。

任何线索是什么问题？

Answer 1

React外部的某些东西很可能会干扰您的DOM。

可以是：

页面中使用的外部库
一个浏览器扩展程序，它会像Google Translate一样更改DOM：https://github.com/facebook/react/issues/11538

React NotFoundError：无法在“ Node”上执行“ insertBefore”：要在其之前插入新节点的节点不是该节点的子节点

1 个答案: