从表中删除行会导致TypeError [英] Removing row from table results in TypeError
问题描述
我有一个ReactJS HTML表组件,我使用 setState
方法更新其内容(单元格值)。以下是基本代码:
I have a ReactJS HTML table component and I update its content (cell values) with the setState
method. Here is the basic 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>
);
}});
您可以这样使用它:
var initialData = [[1,2,3],[4,5,6],[7,8,9]];
var table = React.renderComponent(
<Table data={initialData} />,
document.getElementById('table')
);
这大部分时间都在工作。我可以通过这样做来改变数据(在函数或其他任何地方):
This is working most of the time. I can change the data by doing this (somewhere in a function or whatever):
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]]
哪个应删除最后一行):
As you can see, it adds one row to the end of the table. However, if I try to set the initial data after this update or in any way shorten the number of rows by setting data
to a smaller array (e. g. [[1, 2, 3], [4, 5, 6]]
which should remove the last row):
table.setState({data : initialData});
我收到此错误:
TypeError:updatedChildren [j]未定义
updatedChildren [j] .parentNode.removeChild(updatedChildren [j]);
TypeError: updatedChildren[j] is undefined updatedChildren[j].parentNode.removeChild(updatedChildren[j]);
它来自哪里?
推荐答案
某些浏览器(使用Firefox和Chrome测试)会自动添加< tbody> ...< / tbody>
标记到没有它们的HTML表格。在我的表组件中添加它们可以解决问题:
Some browsers (tested with Firefox and Chrome) add automatically <tbody>...</tbody>
tags to an HTML table that does not have them. Adding them in my Table component fix the issue:
render: function () {
return (
<table><tbody>
{
... same code as before ...
}
</tbody></table>
);
如果查看React生成的html代码,可以注意到它添加了一些数据属性( data-reactid
)由React组件呈现的所有HTML标记(一般来说,有关数据属性的更多信息: go here )。由于< tbody> ...< / tbody>
标记不是来自React组件,因此它们没有任何 data-reactid
并且这些属性有助于React跟踪DOM节点。
If you look at the html code generated by React, you can notice it adds some data attributes (data-reactid
) to all the HTML tags rendered by a React component (to more info about data attribute in general: go here). Since the <tbody>...</tbody>
tags was not from a React component, they did not have any data-reactid
and these attributes help React to track DOM nodes.
无论如何,感谢这些谈论这个问题的人。这里的链接 https://groups.google.com/forum/#!话题/ reactjs / NLS-PdrdDMA 。
Anyway, thank you to these people who talked about this issue. Here the link https://groups.google.com/forum/#!topic/reactjs/NLs-PdrdDMA.
更多关于 data-reactid
: https://groups.google.com/forum/#!topic/reactjs/ewTN-WOP1w8 。
这篇关于从表中删除行会导致TypeError的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!