未捕获错误:不变违规:findComponentRoot(...,... $ 110):无法找到元素。这可能意味着DOM意外地发生了变异

时间:2014-07-29 23:09:26

标签: javascript reactjs react-jsx

我在React的嵌套循环中做错了什么?我在谷歌搜索过信息,但没有找到合适的信息。你能帮我找到,我理解错了吗?

从图中可以看出,我在变量中有数据。它工作正常。但是,当我添加的值不是来自此<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):&gt;无法找到元素。这可能意味着DOM意外地发生了变异(例如,通过&gt;浏览器),通常是因为在使用表时忘记了一个,n ......`。

7 个答案:

答案 0 :(得分:66)

所以问题是你正在创建一个像这样的虚拟DOM结构:

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

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

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

fiddle

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

答案 1 :(得分:2)

当从两个不同的位置(例如来自require和HTML)加载React时,有时也会发生这种情况

答案 2 :(得分:0)

请在反应https://github.com/facebook/react/issues/3811中查看此问题,这说明&#34;它是一个当前限制,您无法从React渲染方法返回多个组件。 &#34;所以如果它返回多个元素

,你也应该检查你的渲染

答案 3 :(得分:0)

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

答案 4 :(得分:0)

此错误是因为某处存在无效的HTML标记。

在我的情况下,我笨拙地让React在按钮标记内生成一个表单标记,直到出现此错误才会实现。检查您的标记是否存在不允许的嵌套错误。

答案 5 :(得分:0)

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

答案 6 :(得分:0)

在我的情况下,问题在于按钮的类型。如果您在type="button"中使用<button>,则ReactDOM会丢失。

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