Question

当我重新加载动态页面时，我收到此错误。

错误：无法找到ID为275的元素。在不变量（invariant.js：38）在precacheChildNodes（ReactDOMComponentTree.js：96） at Object.getNodeFromInstance（ReactDOMComponentTree.js：172） at Object.didPutListener（SimpleEventPlugin.js：210） at Object.putListener（EventPluginHub.js：143） at Object.putListener（ReactDOMComponent.js：176）在CallbackQueue.notifyAll（CallbackQueue.js：76）在ReactReconcileTransaction.close（ReactReconcileTransaction.js：80）在ReactReconcileTransaction.closeAll（Transaction.js：206）在ReactReconcileTransaction.perform（Transaction.js：153）

和

Uncaught（承诺）TypeError：无法读取属性'remove' 未定义 at Object.willDeleteListener（SimpleEventPlugin.js：220） at Object.deleteAllListeners（EventPluginHub.js：201）在ReactDOMComponent.unmountComponent（ReactDOMComponent.js：976）在Object.unmountComponent（ReactReconciler.js：79）在ReactCompositeComponentWrapper.unmountComponent（ReactCompositeComponent.js：418）在Object.unmountComponent（ReactReconciler.js：79） at Object.unmountChildren（ReactChildReconciler.js：146）在ReactDOMComponent.unmountChildren（ReactMultiChild.js：373）在ReactDOMComponent.unmountComponent（ReactDOMComponent.js：974）在Object.unmountComponent（ReactReconciler.js：79）

在这个动态页面中，我有一个原始的html，我用@gallery {Id} @替换了部件react-image-gallery。我不能解决问题，因为在动态路径中，我有2个画廊，它运行良好，服务器端导航和重新加载页面。但是在使用相同动态组件的特定动态路径中，我只在重新加载时才会出现此错误，这意味着如果复制链接并粘贴它以立即访问此页面，我会收到此错误。通过使用检查我看到

<div data-reactid="274">  // this is item in children
     <p>............</p>
    <div data-reactid="275"></div>//but this is another item in children that for unknow reason nested in data-reactid="274"
</div>

但我应该看到

<div data-reactid="274"> 
     <p>............</p>
</div>
<div data-reactid="275"></div>

我认为这是因为要添加更多画廊（更多数据）。问题是，当我使用服务器端导航导航时以及当我重新加载页面时，我得到要渲染的对象数组是相同的。我通过这样做获得阵列。

children = parts.map((item, index) => {
        if (typeof item === "string") {
          return <div key={index} dangerouslySetInnerHTML={{ __html: item }} />
        } else {
          return <div key={index}>{item}</div>;
        }
      })

Answer 1

这是由于您通过dangerouslySetInnerHTML设置的HTML结构无效。很可能是因为标签没有关闭。

Answer 2

我会分享自己在解决这个问题方面的经验，以帮助他人：

对我来说，问题出现了，因为我正在让孩子们通过 AND 对第三方lib进行反应

<Mapbox>{mapLoaded ? children : null}</Mapbox>

地图代码仅加载客户端，需要一个容器div引用，以便在页面加载后注入其<canvas>元素。

通过将子节点移动到为画布保留的div之外，react能够呈现自己的子节点而不会被通过第三方注入的节点中断

<div>
  <Mapbox /> {/* <- this element reserverd for canvas / element injection not handled by react */}
  {mapLoaded ? children : null}
</div>

如果您使用执行dom注射的第三方库，则始终将反应儿童渲染到其外部更安全。

Answer 3

如果您正在使用cloudflare，请确保禁用HTML缩小，因为它会删除用于查找元素的HTML注释。

Answer 4

我刚刚烧了一个小时来调试这个问题。最后，我在jsx上留下了数据重新属性，从Chrome Dev工具中复制了一些代码。我以为我把它们全部删了，但显然不是。有趣的是，报告的id号与jsx中硬编码的id不同。

Answer 5

使用SSR反应15.6，使用非结构化HTML遇到了此问题

<div>
 {isValid
  ?<div>
     {value1}
   </div>
  :{value2}
 }                 
</div>

使用<div>使value2变形后：

<div>
 {isValid
  ?<div>
     {value1}
   </div>
  :<div>
    {value2}
   </div>
 }                 
</div>

错误“消失”

错误：无法找到ID为275

5 个答案: