在React项目开发的时候遇到了这种报错,曾经百思不得其解。之前一个表格的时候都是好好的, 但是这次用了tabs切换两个表格之后就出现了这个问题…

发现问题的操作就是:页面刷新之后直接点击tabs默认显示的表格中的某个单元格就直接报错了。

可能是如下报错信息,这个报错翻译过来就是,删了一个node,但是它不是body的子Node。(其实此处就应该想到应该是渲染未完成导致dom节点还没有挂载完毕就被删除了…)—–通过方案二解决了:

也有可能是这种报错: (通过方案一解决了)

后来在摸索解决方案的过程中发现可能是有两个不同的原因, 在此总结记录一下:

1. setState重复渲染的问题,页面初始化还未完成就又调用了setState(容易发生在多个表格渲染过程中),我的解决方式是给表格加了loading属性,等到loading结束再允许用户操作。

...pages...

2. 因为项目中表格组件用的ag-grid,它是每个单元格都进行渲染最终完成整个表格的渲染,可能你去操作非表格的其他区域时它还没有整体渲染或者更新完毕,所以每次在操作非表格区域之前都需要调用停止编辑的API(常见于一个表格渲染过程中),解决方式就是在进行其他区域的操作时加上api.stopEditing()。

在此之前看了一些文章,比如说加定时器延迟执行,其实原理也是DOM渲染的时候,删除之后DOM里面的还没有反应过来,如果还是没有解决的话可以尝试从这个思路去思考解决方案。