3

重新加载动态页面时出现此错误。

错误：无法在 Object.didPutListener (SimpleEventPlugin.js:210) 的 Object.getNodeFromInstance (ReactDOMComponentTree.js:172) 的 precacheChildNodes (ReactDOMComponentTree.js:96) 的不变量 (invariant.js:38) 中找到 ID 为 275 的元素在 Object.putListener (EventPluginHub.js:143) 在 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 (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) 在 ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:418) 在 Object.unmountComponent (ReactReconciler.js:79) 在 Object.unmountChildren (ReactChildReconciler.js:146) 在 ReactDOMComponent.unmountChildren (ReactMultiChild.js :373) 在 ReactDOMComponent.unmountComponent (ReactDOMComponent.js:974) 在 Object.unmountComponent (ReactReconciler.js:79)

在这个动态页面中，我有一个原始 html，在其中我用组件 react-image-gallery 替换了 @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>;
        }
      })
4

5 回答 5

10

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

于 2017-04-03T17:47:19.193 回答
1

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

对我来说，出现问题是因为我通过 react和3rd 方库渲染孩子

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

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

通过将子元素移到为画布保留的 div 之外，react 能够渲染自己的子元素，而不会被通过第 3 方注入的节点中断

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

如果您使用执行 dom 注入的 3rd 方库，则始终在其外部渲染 react 子项会更安全。

于 2017-09-17T17:50:00.680 回答
0

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

于 2017-08-15T14:28:15.990 回答
0

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

于 2018-03-31T03:45:13.793 回答
0

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

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

在扭曲 value2 后<div>：

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

错误消失

于 2020-04-21T05:24:02.307 回答