reactjs - 错误: 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 个画廊的动态路径中，它运行良好，并且具有服务器端导航和重新加载页面。但是在使用相同动态组件的特定动态路径中，我仅在重新加载时收到此错误，这意味着如果复制链接并粘贴它以立即访问此页面，我会收到此错误。通过使用检查我明白

<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

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