未捕获错误:不变违规:findComponentRoot(...,... $ 110):无法找到元素。这可能意味着DOM意外地发生了变异 [英] Uncaught Error: Invariant Violation: findComponentRoot(..., ...$110): Unable to find element. This probably means the DOM was unexpectedly mutated
问题描述
我在React的嵌套循环中做错了什么?我在谷歌搜索过信息,但没有找到合适的信息。你能帮我找到,我理解错了吗?
What I'm doing wrong with nested cycles in React? I have searched information in Google and I didn't find anything suitable. Can you help me find, what I understand wrong?
从图中可以看出,我在变量中有数据。它工作正常。但是,当我添加的值不是来自此< tr>
时,会出现错误!
As can be seen from the figure, I have data in a variable. And it works fine. But when I'm adding a value not from this <tr>
, error appears!
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> <中添加的项目/ code>):
Error (depends on which item is added from another<tr>
):
未捕获错误:不变违规:findComponentRoot(...,.0.1.1.0.2.0.0.1 。$ 0. $ 9. $ 109):>无法找到元素。这可能意味着DOM意外地发生了变异(例如,通过>浏览器),通常是由于在使用表时忘记了一个,n ......`。
Uncaught Error: Invariant Violation: findComponentRoot(..., .0.1.1.0.2.0.0.1.$0.$9.$109): >Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the >browser), usually due to forgetting a when using tables, n......`.
推荐答案
所以问题是你正在创建一个像这样的虚拟DOM结构:
So the problem is you're creating a virtual DOM structure like this:
<tbody>
<tr>
<div>
<td>...</td>
<td>...</td>
</div>
</tr>
</tbody>
因为< div />
isn这是的有效孩子< tr>
浏览器实际上创建了代表以下内容的DOM:
Because <div/>
isn't a valid child of <tr>
the browser actually creates DOM representing this:
<div> </div>
<table>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
当反应进行更新时,它正在查看< tr>
并想知道< div>
去了哪里。相反,它会找到< td>
,因此会抛出错误。
When react goes to update, it's looking at that <tr>
and wondering where the <div>
went. Instead it finds a <td>
so it throws an error.
这篇关于未捕获错误:不变违规:findComponentRoot(...,... $ 110):无法找到元素。这可能意味着DOM意外地发生了变异的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!