错误：无法找到ID为275的元素

我收到此错误时，我重新加载动态页面。错误：无法找到ID为275的元素

Error: Unable to find element with ID 275. at invariant (invariant.js:38) at 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) at CallbackQueue.notifyAll (CallbackQueue.js:76) at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80) at ReactReconcileTransaction.closeAll (Transaction.js:206) at ReactReconcileTransaction.perform (Transaction.js:153)

和

Uncaught (in promise) TypeError: Cannot read property 'remove' of undefined at Object.willDeleteListener (SimpleEventPlugin.js:220) at Object.deleteAllListeners (EventPluginHub.js:201) at ReactDOMComponent.unmountComponent (ReactDOMComponent.js:976) at Object.unmountComponent (ReactReconciler.js:79) at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:418) at Object.unmountComponent (ReactReconciler.js:79) at Object.unmountChildren (ReactChildReconciler.js:146) at ReactDOMComponent.unmountChildren (ReactMultiChild.js:373) at ReactDOMComponent.unmountComponent (ReactDOMComponent.js:974) at Object.unmountComponent (ReactReconciler.js:79)

在这种动态页面我有一个原始HTML中，我替换@gallery {ID}部分@与组分反应-图像画廊。我不能解决这个问题，因为在动态路径中，我有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>; 
     } 
     })

来源

2017-04-03 Efthimis Pozov

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

来源

2017-04-03 17:47:19

任何建议如何过滤它来检查是否有未关闭的标签关闭它或类似的东西？ –

您可能需要使用HTML解析器来确保有效性。最好确保html在保存时有效。你也可以试试https://www.npmjs.com/package/html-to-react –

你也可以使用add sanitize-html-react（https://www.npmjs.com/package/sanitize-html-react ）来清理原始HTML。它有助于纠正损坏或缺失的HTML标签。 – Skaranjit

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

来源

2017-08-15 14:28:15

我会用这个问题来帮助别人分享我自己的经验：

对于我来说，发生的问题，因为我是使孩子们通过反应和第三方的lib

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

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

通过移动孩子在画布保留股利外，反应过来是能够使自己的孩子没有被通过第三方

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

注入如果您使用执行DOM第三方的lib节点中断注射总是让孩子对其产生反应是比较安全的。

来源

2017-09-17 17:50:00 lfender6445

错误：无法找到ID为275的元素

回答

相关问题