如何在reactjs中調試錯誤

使用webpack在reactjs中縮小了我的代碼，但出現此錯誤，在沒有任何以前工作的更改的情況下拉下較舊的分支。仍然得到相同的錯誤，所以我想可能是reactjs或webpack發生了變化。任何可以建議我如何調試以找到錯誤。如何在reactjs中調試錯誤

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.0.0.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``

來源

2016-02-29 NiseNise

這可能是由於瀏覽器升級而不是React。

在某些情況下，瀏覽器將自動'修復'您的HTML問題，正如React的警告中所述。

如果您創建一個使用一個表像這樣的陣營組成：

<table> 
    <tr> 
    <td>A</td> 
    <td>1</td> 
    </tr> 
</table>

然後一些瀏覽器將嘗試通過添加更多的語義正確<tbody>標籤來幫助你。可發生

<table> 
    <tbody> 
    <tr> 
     <td>A</td> 
     <td>1</td> 
    </tr> 
    </tbody> 
</table>

類似的行爲，如果不應該被遞歸嵌套嵌套標籤（<a>，<p>，<form>），或使用SVG標籤（<g>，<rect>，<path>）的<svg>父母之外。

如果在React試圖管理DOM時出現其他變異，那麼很難區分虛擬DOM，這就是爲什麼React警告你發生了不好的事情。

您的瀏覽器可能已更新，以修復此行爲並未始終涉及的另一個案例。

如果分支機構明確用於工作，那麼您可以在瀏覽器的舊版本（或當時使用的瀏覽器）中嘗試確認問題所在。

打開元素檢查器，抓取HTML的轉儲，然後使用react-dom/server將應用程序呈現爲字符串，然後區分兩者以查看顯示爲不一致的內容。

來源

2016-02-29 03:45:29

是的，會嘗試舊版瀏覽器的問題，因爲它在一個月前工作，並且自那時起沒有額外添加代碼。 – NiseNise

其實答案是，在反應應用程序中，我使用了一個表單標記，並且在根html模板中定義了一個表單標記，並且反應應用程序也封裝在表單中，這是我不知道的 - 因此，當縮小和部署網站出現錯誤。 – NiseNise

您可以使用React Developer Tools for Chrome檢查由React生成的DOM。

我也會測試unminified版本。如果未經版本化的版本不起作用，您將獲得更爲理智的行數，從而使您能夠更精確地隔離錯誤，而不是「我的應用程序中的某處」。如果未經版本化的版本正常工作，那麼您現在已經隔離了您的問題:)

如果您認爲這是由於React的變化引起的，請使用舊版本的React（如果可能）進行測試。

編輯：我應該錯誤是基本上說有人在某個地方正在修改DOM的方式，反應不期望。你有沒有添加任何其他庫？你是否在身體元素上安裝了一個組件？你的HTML是否有任何提到的問題？

來源

2016-02-29 03:28:38

沒有新的庫，只是在本地工作時纔會出現錯誤，只有當它使用webpack縮小時纔會出錯 – NiseNise

如果其他所有內容都保持不變，並且問題只發生在js被縮小以便識別問題時才發生。你可以嘗試其他縮小軟件（uglify，minify ..）並確認問題是否發生？如果它不這似乎是一個webpack中的錯誤。 –

如何在reactjs中調試錯誤

回答

相關問題