我在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 ......`。
答案 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>
当反应进行更新时,它会查看<tr>
并想知道<div>
去了哪里。相反,它会找到<td>
,因此会抛出错误。
答案 1 :(得分:2)
答案 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()
,它对我有效。