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

Posted 2023-02-21

【中文标题】ReactJs“不变违反......”经典反应问题

【英文标题】：ReactJs "Invariant violation..." Classic react issue

【发布时间】：2015-05-21 07:49:24

【问题描述】：

这是一个典型的反应问题，但我有点不知道如何处理它。 我只想动态渲染我的表格线，但我得到了错误：” “未捕获的错误：不变违规：processUpdates()：无法找到元素的子 2。这可能意味着 DOM 被意外突变（例如，被浏览器），通常是由于在使用表格时忘记了 a，嵌套标签，如，

，或，或在父级中使用非 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>

【问题讨论】：

能否提供给我们完整的组件代码？ Protip（无关）：您可以使用condition && element 而不是condition ? element : ''，因为React 不会呈现值false。见False in JSX。

这是完整的组件，在代码末尾添加 return( before and )。感谢您提供条件提示，但这对我的问题没有帮助（无论如何都可以使用此提示）

另外，我注意到了一些错误：<thread> 应该是 <thead>（对于结束标记也是如此），你的 <th> 元素应该在 <tr> 元素内，而你应该将唯一键传递给每个表行（如果您不打算重新排序，<tr key=i> 会这样做）。

感谢这个有用的机器人并没有真正解决这个特定问题

您能否向我们提供Table 组件的源代码/repo？

【参考方案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>
)

【讨论】：

是的，因此您的组件是独一无二的，您可以避免错误。您可以使用 .map 也可以使用

【参考方案2】：

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

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