There was a problem
When I was running the react project today, the page couldn't come out. I opened the console and saw the following:
Error: Minified React error #31;
Obviously, it is a fault caused by the react framework. When encountering this kind of problem, don’t panic, go to the corresponding introduction first, and open the URL it prompts to see what’s going on, so we click on https://reactjs . org/docs/error-decoder.html/?invariant=31&args[]=object%20with%20keys%20%7Btitle%7D&args[]=Look, I have to say that the react framework is really good, very eye-catching tips:
reason
According to the tips given by the official website of react, we can clearly know that this is due to our code writing errors. When the react component is rendered, a child component does not correctly return the data structure supported by react, so the react component supports render What does the function return? Obviously strings, JSX, and arrays are fine, so let's check the code.
According to the investigation, we found the root of the problem:
one of the elements was written like this:
const titleEl = isFlag ? {
title} : <>{
titleLeft}-{
titleRight}</>
Among them , titleand and are both of string type; here it is obvious that this is an object, which is the abbreviation of the abbreviation. Since we returned an object here, the react framework reported this error, so we only need to make changes. up.titleLefttitleRight{title}{title: title}
solution
The modification method is also very simple, there are two kinds:
const titleEl = isFlag ? title : <>{
titleLeft}-{
titleRight}</>
or this:
const titleEl = isFlag ? <>{
title}</> : <>{
titleLeft}-{
titleRight}</>
Look again after the modification, the page is ready, and the console has not reported an error, which is a perfect solution.