这是一个典型的反应问题,但我有点不知道如何处理它。
我只想动态渲染我的表格线,但我收到错误:”
“未捕获错误:不变违规:processUpdates():无法找到元素的子元素 2。这可能意味着 DOM 意外变异(例如,通过浏览器),通常是由于在使用表、嵌套标签(例如,
、 或 、 或 在父级中使用非 SVG 元素。尝试使用 React ID 检查元素的子节点.2.1.0
."
我知道 React 没有找到正确的 DOM 内容,但是如何处理呢?提前致谢 !
<div className="panel-body" style={panelstyle}>
<Table striped bordered condensed hover>
<thread>
<th> Currency </th>
<th> Amount </th>
<th> Issuer </th>
<th> Limit </th>
<th> Limit Peer </th>
<th> No-Ripple </th>
</thread>
<tbody>
{this.state.ripplelines[this.address] ?
this.state.ripplelines[this.address].lines.map(function(line,i) {
return (<tr>
<td> USD </td>
<td> 1500 </td>
<td> raazdazdizrjazirazrkaẑrkazrâkrp </td>
<td> 1000000000 </td>
<td> 0 </td>
<td> True </td>
</tr>)
;
})
: ""}
</tbody>
</Table>
</div>
这里有一个答案:React js:不变违规:渲染具有不同数量子行的表时的 processUpdates() https://stackoverflow.com/questions/26689900/react-js-invariant-violation-processupdates-when-rendering-a-table-with-a-di
只需在渲染之前准备好行即可!
render:
var rows = [];
if(this.state.ripplelines[this.address] ) {
_.each(this.state.ripplelines[this.address].lines, function(line) {
rows.push( <tr>
<td> somestuff!</td>
</tr>)
});
}
return (
<Table striped bordered condensed hover>
<thead>
<th> Currency </th>
<th> Amount </th>
<th> Issuer </th>
<th> Limit </th>
<th> Limit Peer </th>
<th> No-Ripple </th>
</thead>
<tbody>
{rows}
</tbody>
</Table>
)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)