问题出现

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

其中titletitleLefttitleRight都是string类型的;
这里很明显{title}这个是一个对象,就是{title: title}的缩写,由于我们在这里返回了一个对象,所以导致了react框架报出了这个错误,所以,我们只需进行更改就好了。

解决方式

修改方式也很简单,有两种:

const titleEl = isFlag ? title : <>{titleLeft}-{titleRight}</>

或者这样:

const titleEl = isFlag ? <>{title}</> : <>{titleLeft}-{titleRight}</>

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

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐