Error: Unable to find element with ID 275

Question

我在重新加载动态页面时遇到此错误。

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

<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

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

Answer 3

我将分享我自己解决这个问题的经验以帮助其他人：

对我来说，出现这个问题是因为我正在通过 React AND 渲染 children 一个第三方库

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

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

通过将 children 移到为 canvas 保留的 div 之外，React 能够呈现自己的 children 而不会被通过第 3 方注入的节点中断

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

如果您使用执行 dom 注入的第 3 方库，则始终在其外部渲染反应 children 更安全。

Answer 4

我刚刚花了一个小时来调试这个问题。最后，我的 jsx 上有 data-reactid 属性，这是从 Chrome 开发工具中复制一些代码留下的。我以为我把它们都删除了，但显然没有。有趣的是，报告的 ID 号与 jsx 中硬编码的 ID 不同。

Answer 5

React 15.6 with SSR，遇到非结构化问题HTML

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

用 <div> 扭曲 value2 后：

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

错误消失

Error: Unable to find element with ID 275

Error: Unable to find element with ID 275

reactjs

redux

react-starter-kit