从表中删除行会导致TypeError

本文介绍了从表中删除行会导致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.

无论如何，感谢这些谈论这个问题的人。这里的链接 groups.google/forum/#！话题/ reactjs / NLS-PdrdDMA 。

Anyway, thank you to these people who talked about this issue. Here the link groups.google/forum/#!topic/reactjs/NLs-PdrdDMA.

更多关于 data-reactid ： groups.google/forum/#!topic/reactjs/ewTN-WOP1w8 。