React のネストされたサイクルで何が間違っていますか? Google で情報を検索しましたが、適切なものが見つかりませんでした。私が間違っていると理解していることを見つけるのを手伝ってもらえますか?
図からわかるように、変数にデータがあります。そして、それはうまくいきます。しかし、 this 以外の値を追加すると<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 が予期せず (ブラウザなどによって) 変更されたことを意味します。これは通常、テーブルを使用するときに a を忘れたため、n......` です。