问题出现
今天在跑react项目时,页面出不来,打开控制台,看到下面这样:
Error: Minified React error #31;
很明显,是react框架爆出来的错,遇到这种问题,别慌,先去看对应的介绍,先打开它提示的这个网址去看看啥情况,于是我们点开https://reactjs.org/docs/error-decoder.html/?invariant=31&args[]=object%20with%20keys%20%7Btitle%7D&args[]=看看,不得不说react框架做的确实好,很醒目的提示了:
原因
根据react官网给出的提示,我们可以清晰的知道,这是由于我们代码书写的错误,导致react组件在render的时候,有一个孩子组件没有正确的返回react支持的数据结构,那么react组件支持render函数返回什么呢?很明显字符串、JSX和数组都可以,于是我们去排查代码。
根据排查,我们找到了问题的根源:
其中一个元素写成了这样:
const titleEl = isFlag ? {title} : <>{titleLeft}-{titleRight}</>
其中title
和titleLeft
、titleRight
都是string类型的;
这里很明显{title}
这个是一个对象,就是{title: title}
的缩写,由于我们在这里返回了一个对象,所以导致了react框架报出了这个错误,所以,我们只需进行更改就好了。
解决方式
修改方式也很简单,有两种:
const titleEl = isFlag ? title : <>{titleLeft}-{titleRight}</>
或者这样:
const titleEl = isFlag ? <>{title}</> : <>{titleLeft}-{titleRight}</>
改完之后再去看,页面已经好了,控制台也没有报错了,完美解决。