A remoção da linha da tabela resulta em TypeError
Eu tenho um componente da tabela HTML do ReactJS e atualizo seu conteúdo (valores de célula) com osetState
método. Aqui está o código básico:
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>
);
}});
Você usaria assim:
var initialData = [[1,2,3],[4,5,6],[7,8,9]];
var table = React.renderComponent(
<Table data={initialData} />,
document.getElementById('table')
);
Isso está funcionando na maioria das vezes. Eu posso alterar os dados fazendo isso (em algum lugar de uma função ou qualquer outra coisa):
var newData = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]];
table.setState({data : newData});
Como você pode ver, ele adiciona uma linha ao final da tabela. No entanto, se eu tentar definir os dados iniciais após esta atualização ou de alguma formaencurtar o número de linhas definindodata
para uma matriz menor (por exemplo,[[1, 2, 3], [4, 5, 6]]
que deve remover a última linha):
table.setState({data : initialData});
Eu recebo este erro:
TypeError: updatedChildren [j] é indefinido updatedChildren [j] .parentNode.removeChild (updatedChildren [j]);
De onde isso vem?