javascript-未捕获的错误:始终违反:findComponentRoot(...,... $ 110):无法找到元素。 这可能意味着DOM被意外地突变了

我在React中的嵌套循环做错了什么? 我已经在Google中搜索了信息,但没有找到合适的信息。 您能帮我找到我理解的错误吗?

从图中可以看出,我有一个变量中的数据。 而且效果很好。 但是,当我添加的不是此<tr>的值时,会出现错误!

    var TableBalls80 = React.createClass({
        render:function(){
            var rows = this.props.rows;
            var columnId = 0, trKey = 0, divKey = 0, td1stKey = 0;
            var td2ndKey = 100;
            return(
                    <table className='table table-bordered bg-success'>
                                <thead>
                                <tr className='danger'>
                                    {rows[0].row.map(function (element){
                                        columnId++;
                                        return (
                                        <th colSpan="2" key={columnId}>{columnId}</th>);
                                    })}
                                </tr>
                                </thead>
                                <tbody>
                                    {rows.map(function (rowElement){
                                        return (<tr key={trKey++}>
                                        {rowElement.row.map(function(ball){
                                            console.log('trKey:'+trKey+' td1stKey'+td1stKey+' ball.value:'+ball.value+' td2ndKey:'+td2ndKey+' ball.count:'+ball.count);
                                            return(<div key={divKey++}>
                                                <td className='info' key={td1stKey++}>{ball.value}</td><td key={td2ndKey++}>{ball.count}</td>
                                            </div>);
                                        })}
                                        </tr>);
                                    })}
                                </tbody>
                            </table>);
        }
    });

错误(取决于从另一个<tr>添加的项目):

未捕获的错误:不断违反:findComponentRoot(...,.0.1.1.0.2.0.0.1。$ 0. $ 9. $ 109):>无法找到元素。 这可能意味着DOM发生了意外更改(例如,通过>浏览器进行了更改),通常是由于在使用表时忘记了n ......`。

Eldar Nezametdinov asked 2020-08-09T09:12:51Z
8个解决方案
67 votes

所以问题是您正在创建一个虚拟的DOM结构,如下所示:

<tbody>
   <tr>
      <div>
         <td>...</td>
         <td>...</td>
      </div>
   </tr>
</tbody>

由于<tr>不是<div>的有效子代,因此浏览器实际上会创建表示以下内容的DOM:

<div> </div>
<table>
<tbody>
   <tr>
      <td>...</td>
      <td>...</td>
   </tr>
</tbody>
</table>

小提琴

当反应进行更新时,它正在查看<tr>,并想知道<div>去了哪里。 相反,它将找到<td>,因此会引发错误。

Brigand answered 2020-08-09T09:13:10Z
4 votes

我在尝试进行此操作时遇到上述错误:

component = React.addons.TestUtils.renderIntoDocument(<MyTableRow />)
React.findDOMNode(component)

我的解决方法是在渲染之前将其包装:

component = React.addons.TestUtils.renderIntoDocument(<table><MyTableRow /></table>)
table = React.findDOMNode(component)
row = jQuery(table).find("tr")[0]
Henrik N answered 2020-08-09T09:13:34Z
2 votes

当React从两个不同的位置加载时(例如从require和HTML加载)有时也会发生

Ohad Milchgrub answered 2020-08-09T09:13:54Z
0 votes

也请在react [https://github.com/facebook/react/issues/3811]中检查此问题,它说:“这是当前的限制,您不能从React渲染方法返回多个组件。” 因此,您还应该检查渲染是否返回多个元素

Suchit Puri answered 2020-08-09T09:14:15Z
0 votes

我有类似的问题,原因是我在React.js组件中使用了<form>标记,并将其渲染到已经打开了<form>的页面位置。 表单不能嵌套。 因此,即使组件内部的HTML似乎有效,您也可以得到此错误。

Tuomas Hietanen answered 2020-08-09T09:14:35Z
0 votes

该错误是因为某个地方存在无效的HTML标记。

就我而言,我笨拙地让React在按钮标签内生成了一个表单标签,直到这个错误开始出现之前我才意识到。 检查您的标记是否存在不允许的嵌套错误。

Matthew Corway answered 2020-08-09T09:14:59Z
0 votes

我遇到了同样的问题,结果是DOM中的两个元素具有相同的ID(无意间)。

Rob Johansen answered 2020-08-09T09:15:19Z
0 votes

就我而言,问题在于按钮的类型。 如果在event.preventDefault()中使用type="button",则ReactDOM会丢失。

我删除了type="button",并在onClick处理程序上添加了event.preventDefault(),它对我有用。

jmartins answered 2020-08-09T09:15:44Z
translate from https://stackoverflow.com:/questions/25026399/uncaught-error-invariant-violation-findcomponentroot-110-unable-to