我在React中的嵌套循环做错了什么?我已经在Google中搜索了信息,但没有找到合适的信息。您能帮我找到我理解的错误吗?
从图中可以看出,我有一个变量中的数据。而且效果很好。但是,当我添加的不是这个值时<tr>,会出现错误!
<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......。
所以问题是您正在创建一个虚拟的DOM结构,如下所示:
<tbody> <tr> <div> <td>...</td> <td>...</td> </div> </tr> </tbody>
由于<div/>不是有效<tr>的浏览器子级,因此实际上会创建表示此内容的DOM:
<div/>
<div> </div> <table> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table>
小提琴
当react进行更新时,它正在查看<tr>并想知道<div>去哪里了。相反,它找到一个,<td>因此引发错误。
<div>
<td>