Question

这是一个典型的反应问题，但我不知道如何处理它。我只是想动态渲染我的表格行但是我得到错误：＆＃34; ＆＃34;未捕获错误：不变违规：processUpdates（）：无法找到元素的子元素2。这可能意味着DOM意外地发生了变异（例如，通过浏览器），通常是由于在使用表时忘记了，嵌套标签，如

，或者在父级中使用非SVG元素。尝试使用React ID .2.1.0检查元素的子节点。＆＃34;

我理解反应是找不到正确的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

对于使用不可变与 React.js 的任何人：

即使使用适当的<thead>和<tbody>，我也会遇到同样的错误。事实证明我使用Immutable.List()来存储我的<tr>元素。通过.toArray()将其转换为数组解决了这个错误。

ReactJs“不变违规......”经典反应问题

2 个答案: