如何解决未捕获的错误:始终违反:findComponentRoot…,…$ 110:无法找到元素这可能意味着DOM被意外地突变了
所以问题是您正在创建一个虚拟的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>
当react进行更新时,它正在查看<tr>
并想知道<div>
去哪里了。相反,它找到一个,<td>
因此引发错误。
解决方法
我在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......。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。