从表中删除行会导致 TypeError

IT技术 javascript reactjs
2021-05-13 10:33:56

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

它从何而来?

1个回答

一些浏览器(用 Firefox 和 Chrome 测试)会自动将<tbody>...</tbody>标签添加到没有标签的 HTML 表格中。将它们添加到我的 Table 组件中可以解决问题:

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

如果您查看 React 生成的 html 代码,您会注意到它data-reactid向 React 组件呈现的所有 HTML 标记添加了一些数据属性 ( )(有关一般数据属性的更多信息:转到此处)。由于<tbody>...</tbody>标签不是来自 React 组件,它们没有任何标签data-reactid,这些属性帮助 React 跟踪 DOM 节点。

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

更多关于data-reactidhttps : //groups.google.com/forum/# ! topic/reactjs/ewTN-WOP1w8