vlambda博客
学习文章列表

前言

我们在开发过程中，经常会遇到控制台抛出的React相关异常信息，由于React是当前最流行的前端框架之一，它的错误提示一般也非常的友好，当你看到React错误时不要恐慌，仔细看下React给出的错误信息，都能一步步定位到根本原因。下面我就以我们MDF框架经常遇到的React错误为例，整理下我的解决思路，仅供参考。

1、 Minified React error #130

当你打开一个界面发现页面白屏了，控制台报了一个React的130错误

看到这个错误后，可能一脸懵逼，但仔细看错误提示，让你 https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= 这个来看详细报错信息，所以当我们点击这个链接时，能看到下面的提示信息，翻译下来就是元素类型无效，期望是个string，但得到undefined，大白话就是比如你使用一个引用一个A组件，但是A组件没获取到。

此刻你可能还是无从下手，我们组件那么多，我怎么能知道哪个组件没定义呢，接下来我们还要继续看控制台的错误，我们将控制台的错误提示小三角展开，看下详细信息，除了react-dom内部js外，我们看到我们自己写的第一个js就是mdf.jsx，且提示112行有错误（前提是我们要override本地带sourcemap代码）。

点进去以后，发现112行是ReactDOM的render方法，里面有个Provider组件，里层是个Locale组件,Provider组件是react-redux提供的不可能没定义，然后再排查Locale组件，发现Locale组件是由@mdf/baseui组件提供，再深分析得得到locale就是tinperNext的的ConfigProvider组件，而这个版本的tinperNext还没有ConfigProvider组件，tinperNext的版本太老导致的，而tinperNext是由工作台提供，所以推动工作台升级tinperNext版本，就将这个问题彻底解决了。

2、Minified React error #31

同样的方法将错误信息展开以及访问错误详情

请教谷歌

以上信息可以得出，是由我们listrefer报出的错误，错误信息意思是object不能作为react的的孩子，应该用Array，然后分析listrefer178行代码，发现执行了一个setState，里面有value和searchValue，导致的报错

再仔细分析value和searchValue看到value传了一个组件，而这个改动是王静最近重构listrefer了，底层组件用的Select==>tinperNext==>rc-select，而value传组件是rc-select新版本才支持，也就是说还是因为老的钉耙版本引用老的rc-select导致的问题。还需要推动工作台升级钉耙版本。

当然如果一个界面组件很多，你无法判断哪个组件导致的问题，你可以通过排除法，将怀疑的组件首先return一个空div，逐个排查法，最终定位到有问题的组件。

总结

1. 遇到react错误时，点开react官方错误解释信息，仔细研读，如果翻译不出来，可以用谷歌翻译，或者用谷歌|百度直接搜错误编码，多点几个你就大概明白什么意思了。

2. 将控制台错误信息，详情展开，看哪个组件导致的错误，再逐级分析，逐步排查。

当然在开发中遇到的react相关错误当然远远不止是这些，想要更快更准确的定位到错误，离不开经验和积累，遇到错误拿小本本记下来，分析出错误原因，总结归类。只有见过的错误有足够多，才能做到从容不迫的解决。