[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題

質問

これは典型的なreactの問題なのですが、ちょっと対処の仕方がわかりません。 テーブルの行を動的にレンダリングしたいだけなのですが、エラーが発生します:" "アンキャッチエラー。Invariant Violation: processUpdates(): Unable to find child 2 of element. これはおそらく、DOM が (たとえばブラウザによって) 予期せず変更されたことを意味します。通常は、テーブルを使用するときに、.NET のようなタグをネストするのを忘れたことが原因です。

または、親に非 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()

レンダリング前に行を用意すればOK!

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>
)