React踩坑记录：Error: Minified React error #31；

问题出现

今天在跑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}</>

改完之后再去看，页面已经好了，控制台也没有报错了，完美解决。