Entfernen von Zeile aus Tabelle führt zu TypeError

Question

Ich habe eine ReactJS HTML-Tabellenkomponente, und ich aktualisiere seinen Inhalt (Zellwerte) mit der setState-Methode. Hier ist die grundlegende Code:

var Cell = React.createClass({ 
    render: function() { 
    return (<td>{this.props.cellValue}</td>); 
     } 
    }); 

var Row = React.createClass({ 
    render: function() { 
    return (<tr>{this.props.row}</tr>); 
    } 
    }); 

var Table = React.createClass({ 
    getInitialState: function() { 
    return { 
     data: this.props.data 
    }; 
    }, 
    render: function() { 
    return (
     <table> 
     { 
     this.state.data.map(function(row) { 
      var r = row.map(function(cell) { 
      return <Cell cellValue={cell}/>; 
      }); 

      return (<Row row={r}/>); 
     }) 
     } 
     </table> 
    ); 
    }}); 

Sie es wie folgt verwenden würde:

var initialData = [[1,2,3],[4,5,6],[7,8,9]]; 
var table = React.renderComponent(
    <Table data={initialData} />, 
    document.getElementById('table') 
); 

Dies wird die meiste Zeit arbeiten. Ich kann die Daten ändern, indem Sie diese (irgendwo in einer Funktion oder was auch immer):

var newData = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]]; 
table.setState({data : newData}); 

Wie Sie sehen können, es fügt eine Zeile am Ende der Tabelle. Wenn ich jedoch die Ausgangsdaten nach diesem Update oder in irgendeiner Weise zu setzen versuchen verkürzen die Anzahl der Zeilen, die von data auf einen kleineren Array-Einstellung (zB [[1, 2, 3], [4, 5, 6]] die die letzte Zeile entfernen soll):

table.setState({data : initialData}); 

I Erhalten Sie diesen Fehler:

TypeError: updatedChildren[j] is undefined updatedChildren[j].parentNode.removeChild(updatedChildren[j]);

Woher kommt es?

Answer 1

Einige Browser (getestet mit Firefox und Chrome) fügen automatisch <tbody>...</tbody> Tags zu einer HTML-Tabelle hinzu, die sie nicht enthält. Hinzufügen von ihnen in meiner Tabelle Komponente beheben das Problem:

render: function() { 
    return (
     <table><tbody> 
     { 
     ... same code as before ... 
     } 
     </tbody></table> 
    ); 

Wenn Sie den HTML-Code aussehen, die durch Reaktion, können Sie feststellen, es einige Daten Attribute hinzufügt (data-reactid) an alle HTML-Tags durch eine Komponente Reagieren gemacht (zu mehr Info über Datenattribut allgemein: go here). Da die <tbody>...</tbody> Tags nicht von einer React-Komponente stammten, hatten sie keine data-reactid und diese Attribute helfen React beim Verfolgen von DOM-Knoten.

Wie auch immer, danke an diese Leute, die über dieses Thema gesprochen haben. Hier der Link https://groups.google.com/forum/#!topic/reactjs/NLs-PdrdDMA.

Mehr über data-reactid: https://groups.google.com/forum/#!topic/reactjs/ewTN-WOP1w8.