Supprimer la ligne des résultats de table dans TypeError

J'ai un composant de table HTML ReactJS et je met à jour son contenu (valeurs de cellule) avec la méthode setState . Voici le code de base:

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

Vous l'utiliseriez comme suit:

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

Cela fonctionne la plupart du temps. Je peux modifier les données en faisant cela (quelque part dans une fonction ou autre):

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

Comme vous pouvez le voir, il ajoute une ligne à la fin de la table. Cependant, si j'essaie de définir les données initiales après cette mise à jour ou de raccourcir le nombre de lignes en définissant des data dans un tableau plus petit (p. Ex. [[1, 2, 3], [4, 5, 6]] qui devrait Supprimer la dernière ligne):

 table.setState({data : initialData}); 

Je reçois cette erreur:

TypeError: updatedChildren [j] est indéfini updatedChildren [j] .parentNode.removeChild (updatedChildren [j]);

D'où est ce que ça vient?

Certains navigateurs (testés avec Firefox et Chrome) ajoutent automatiquement <tbody>...</tbody> à une table HTML qui ne les possède pas. En les ajoutant dans le composant de ma table, corrigez le problème:

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

Si vous regardez le code html généré par React, vous pouvez remarquer qu'il ajoute certains attributs de données ( data-reactid ) à toutes les balises HTML rendues par un composant React (pour plus d'informations sur l'attribut données en général: cliquez ici ). Étant donné que les <tbody>...</tbody> pas d'un composant React, ils n'avaient aucune data-reactid et ces attributs permettent de réagir pour suivre les nœuds DOM.

Quoi qu'il en soit, merci à ces personnes qui ont parlé de cette question. Voici le lien https://groups.google.com/forum/#!topic/reactjs/NLs-PdrdDMA .

En savoir plus sur les data-reactid : https://groups.google.com/forum/#!topic/reactjs/ewTN-WOP1w8 .