从表中删除行会导致TypeError

我有一个ReactJS HTML表组件,我用该setState方法更新其内容(单元格值).这是基本代码:

 var Cell = React.createClass({
  render: function () {
    return ({this.props.cellValue});
      }
    });

 var Row = React.createClass({
  render: function () {
     return ({this.props.row});
   }
  });

var Table = React.createClass({
  getInitialState: function() {
    return {
      data: this.props.data
    };
  },
  render: function () {
    return (
      
      {
        this.state.data.map(function(row) {
          var r = row.map(function(cell) {
            return ;
          });

          return ();
        })
      }
      
     );
  }});

你会像这样使用它:

var initialData = [[1,2,3],[4,5,6],[7,8,9]];
var table = React.renderComponent(
  ,
  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]);
它从何而来？

        
1 个回答
        

                        

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

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-reactid:https://groups.google.com/forum/#!topic /reactjs/ewTN-WOP1w8.

        
                

                    
2023-01-29 09:32  回答
                    
   过期物品请勿购_613
                
            
                    
    

        
撰写答案
        

            

                

                    回答问题...
                
                
                

                    
                
            
        
    

    

        
今天，你开发时遇到什么问题呢？
        
立即提问
    

    

        
热门标签
        

            

                                

            
        
    


    

    PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 |  DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具  | 在线工具

    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved   京公网安备 11010802041100号  |  京ICP备19059560号-4 | PHP1.CN 第一PHP社区  版权所有