Day 152/200 React项目，谷歌翻译导致更新数据se
前言
今儿在研究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节点来更新数据；
以上
