Question

使用webpack缩小我在reactjs中的代码但是收到此错误，请删除旧版分支，而不进行之前正在进行的更改。仍然得到相同的错误，所以我想也许有一些变化与reactjs或webpack。可以建议我如何调试以找到错误。

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 ``

Answer 1

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

我也会测试未经宣传的版本。如果未公开的版本不起作用，那么您将获得更加理智的行号，使您能够比“在我的应用程序中的某个地方”更精确地隔离错误。如果未公开的版本有效，那么您现在已经解决了问题：）

如果您认为这是由于React发生了变化，那么请使用旧版本的React进行测试（如果可能的话）。

编辑：我应该错误基本上说某个人正在以React不期望的方式修改DOM。你有没有添加任何其他库？您是否在主体元素上安装了一个组件？您的HTML是否有任何提到的问题？

Answer 2

这可能是由于浏览器升级，而不是React。

在某些情况下，浏览器会自动“修复”HTML问题，如React警告中所述。

如果您创建一个使用如下表格的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>，{ {1}}，<rect>）在<path>父母之外。

如果其他东西改变了DOM，而React正试图管理它，那么就很难将虚拟DOM与它区分开来，这就是为什么React会警告你发生了一些不好的事情。

您的浏览器可能已更新，以修复此行为的另一种情况，但并非总是如此。

如果该分支确实可以使用，那么您可以在浏览器的旧版本（或您当时使用的任何浏览器）中尝试确认这是问题。

打开元素检查器，获取HTML的转储，然后使用<svg>将应用程序呈现为字符串，然后将两者区分开以查看显示为不一致的内容。

Answer 3

如果问题仅在生产环境中发生，我发现以最有效的方式隔离问题的最佳方法是在本地计算机上构建/缩小并注释/取消注释找出根本原因的逻辑：

python -m pip install Psycopg2

如何在reactjs中调试错误

3 个答案: