前言
今儿在研究Jest 被叫去临组帮忙,发现是用Umi写的React+Ts 看着还是有点懵,导致的问题也没见过,最终解决了,总结下解决方案
1、问题
点击谷歌翻译后,点击有数据请求更新页面的事件,页面白屏(或报错)
点击谷歌翻译后,点击没有数据请求的事件, 没报错;
不点击谷歌翻译,没报错;
此外还有控制台的报错如下:
DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
2、分析
观察页面,在点击谷歌翻译后,页面多了两层嵌套的<font>标签
打日志,在setState更新数据前后打印日志,发现是在setState时报错的
分析是因为多了两层<font>导致DOM树有更改,新增的数据,无法用原来的数据挂载上,dispather 数据更改通知时,setState会报错
也因此有了插入和未挂载的报错;
没有请求数据,意味着点击之前存的数据不需要更新新的DOM树,所以,没报错
3、解决方案
不要让一块可删改的react元素最外层存在文本节点
用人话说就是在,类似文本显示的地方,都用<span></span>标签包裹起来
原理是:有span标签包裹,即使新增两层<font>标签,依然可以找到span标签的DOM节点来更新数据;
以上