Reagieren js: Invariant Verletzung: processUpdates(), wenn Sie eine Tabelle mit einer unterschiedlichen Anzahl von untergeordneten Zeilen Rendering

Question

ich die folgende Störung erhalte, wenn meine reagieren Komponente wird nach einem Klick Ereignis erneut gerendert:

Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 2 of element. This probably means the DOM was unexpectedly mutated ... 

Diese tritt nur auf, wenn meine Tabelle eine andere Anzahl von Zeilen als die zuvor gerenderte Version hat. Zum Beispiel:

/** @jsx React.DOM */ 

React = require('react'); 

var _ = require("underscore"); 

var testComp = React.createClass({ 

    getInitialState: function() { 
    return { 
     collapsed: false 
    }; 
    }, 

    handleCollapseClick: function(){ 
    this.setState({collapsed: !this.state.collapsed}); 
    }, 

    render: function() { 

    var rows = [ 
     <tr onClick={this.handleCollapseClick}><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr> 
    ]; 

    if(!this.state.collapsed){ 
     rows.push(<tr><th>Row1 1</th><th>Row1 2</th><th>Row1 3</th></tr>); 
    } 

    rows.push(<tr><th>Footer 1</th><th>Footer 2</th><th>Footer 3</th></tr>); 

    return <div> 
       <table> 
        {rows} 
       </table> 
      </div> 
    } 

}); 

module.exports = testComp 

Wenn ich unterschiedliche Inhalte machen, aber mit der gleichen Anzahl von Zeilen, ich habe nicht den Fehler, so dass, wenn ich die if-Anweisung aktualisieren:

if(!this.state.collapsed){ 
    rows.push(<tr><th>Row1 1</th><th>Row1 2</th><th>Row1 3</th></tr>); 
}else{ 
    rows.push(<tr><th>Row2 1</th><th>Row2 2</th><th>Row2 3</th></tr>); 
} 

.. . funktioniert alles.

Muss ich gezwungenermaßen reagieren, um die gesamte Komponente in diesem Fall anstatt nur der "geänderten" Elemente neu zu rendern?

Answer 1

Sie sollten die vollständige Fehlermeldung lesen (zumindest das ist, was ich sehe):

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 <tbody> when using tables, nesting tags like <form> , <p> , or <a> , or using non-SVG elements in an parent.

Jeder Tabelle benötigt ein <tbody> Element. Wenn es nicht existiert, wird der Browser es hinzufügen. Reagieren funktioniert jedoch nicht, wenn das DOM von außen manipuliert wird.

Verwandte: Removing row from table results in TypeError

Answer 2

Ich denke, Ihr Problem ist mit der Verwendung des Tags <th> in mehreren Zeilen. <th> ist für die Kopfzeile reserviert. Versuchen Sie, es mit <td> überall außer in der ersten Zeile zu ersetzen. Auch sollten Sie den Header in einem <thead>-Tag und den Rest in einem <tbody> Tag wickeln:

var header = [ 
    <tr onClick={this.handleCollapseClick}><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr> 
]; 

var body = []; 
if(!this.state.collapsed){ 
    body.push(<tr><td>Row1 1</td><td>Row1 2</td><td>Row1 3</td></tr>); 
} 

body.push(<tr><td>Footer 1</td><td>Footer 2</td><td>Footer 3</td></tr>); 

return <div> 
    <table> 
     <thead>{header}</thead> 
     <tbody>{body}</tbody> 
    </table> 
</div>; 

Answer 3

ich dies auf, wenn mit p Tags handelt. Ich hatte Absätze in Absätzen verschachtelt.

das Problem, das ich mit einem div Element ersetzt das Einwickeln p Element zu beheben.

Vorher:

render: function render() { 
    return (
     <p> 
      <p>1</p> 
      <p>2</p> 
     </p> 
    ); 
} 

Nach:

render: function render() { 
    return (
     <div> 
      <p>1</p> 
      <p>2</p> 
     </div> 
    ); 
} 

Answer 4

Für Menschen, die reagieren-Vorlagen verwenden:

Sie haben den <tbody>-Tag in der .jsx-Datei zu erzeugen. Wenn Sie es nur in der RT-Datei hinzufügen, erhalten Sie immer noch die Fehlermeldung.

this.tbody = <tbody>{tablerows}</tbody> // - in .jsx 

Answer 5

In meinem Fall die Lösung ist, Räume in der Tabelle entfernen machen

<tbody> {rows} </tbody> 

zu

<tbody>{rows}</tbody>