我有一个 ReactJS HTML 表格组件,我使用该setState
方法更新了它的内容(单元格值)。下面是基本代码:
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>
);
}});
你会像这样使用它:
var initialData = [[1,2,3],[4,5,6],[7,8,9]];
var table = React.renderComponent(
<Table data={initialData} />,
document.getElementById('table')
);
这在大部分时间都有效。我可以通过这样做来更改数据(在函数中的某处或其他地方):
var newData = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]];
table.setState({data : newData});
如您所见,它在表的末尾添加了一行。但是,如果我尝试在此更新后设置初始数据或以任何方式通过设置为较小的数组(例如应该删除最后一行)来缩短行数:data
[[1, 2, 3], [4, 5, 6]]
table.setState({data : initialData});
我收到此错误:
类型错误:updatedChildren[j] 未定义 updatedChildren[j].parentNode.removeChild(updatedChildren[j]);
它从何而来?