錯誤：無法找到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的元素

回答

相關問題