从表中删除行会导致TypeError

Question

我有一个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});

我收到此错误：

TypeError：updatedChildren [j]是未定义的updatedChildren [j]
.parentNode.removeChild（updatedChildren [j]）;

它从何而来？

Answer 1

一些浏览器（经过Firefox和Chrome测试）会自动将<tbody>...</tbody>标签添加到没有标签的HTML表中。将它们添加到我的表组件中可以解决此问题：

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

如果您看一下React生成的html代码，您会注意到它data- reactid向React组件渲染的所有HTML标签添加了一些数据属性（）（有关data属性的更多信息，请参见：此处）。由于<tbody>...</tbody>html" target="_blank">标签不是来自React组件，因此它们没有任何标签data- reactid，这些属性有助于React跟踪DOM节点。

无论如何，谢谢那些谈论这个问题的人。这里的链接https://groups.google.com/forum/#!topic/reactjs/NLs-
PdrdDMA
。

有关更多信息data- reactid：https
:
//groups.google.com/forum/# ! topic/reactjs/ewTN-
WOP1w8。