Day 152/200 React项目，谷歌翻译导致更新数据setState报错

前言

今儿在研究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、分析

1. 观察页面，在点击谷歌翻译后，页面多了两层嵌套的<font>标签
2. 打日志，在setState更新数据前后打印日志，发现是在setState时报错的
3. 分析是因为多了两层<font>导致DOM树有更改，新增的数据，无法用原来的数据挂载上，dispather 数据更改通知时，setState会报错
4. 也因此有了插入和未挂载的报错；
5. 没有请求数据，意味着点击之前存的数据不需要更新新的DOM树，所以，没报错

3、解决方案

不要让一块可删改的react元素最外层存在文本节点

用人话说就是在，类似文本显示的地方，都用<span></span>标签包裹起来

原理是：有span标签包裹，即使新增两层<font>标签，依然可以找到span标签的DOM节点来更新数据；

以上

参考链接

小伙伴遇到这个问题说不想干前端了——一次Chrome翻译造成的玄学bug_sido的博客-CSDN博客