ReactJs "Invariant violation..." 经典反应问题

Question

这是一个典型的 React 问题，但我有点不知道如何处理它。我只想动态呈现我的 table 行，但出现错误：" "Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 2 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a when using tables, nesting tags like ,

, or , or using non-SVG elements in an parent. Try inspecting the child nodes of the element with 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>

Answer 1

这里有答案：React js: Invariant Violation: processUpdates() when rendering a table with a different number of child rows

只需在渲染前准备行！

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

Answer 2

对于使用 Immutable 和 React.js 的任何人：

即使 <thead> 和 <tbody> 正确，我也遇到了同样的错误。结果我使用 Immutable.List() 来存储我的 <tr> 元素。通过 .toArray() 将其转换为数组解决了此错误。

ReactJs "Invariant violation..." 经典反应问题

ReactJs "Invariant violation..." Classic react issue

reactjs