共计 2966 个字符,预计需要花费 8 分钟才能阅读完成。
注释从这开始~
总览
当咱们尝试在 JSX 代码中,间接渲染对象或者数组时,会产生 "Objects are not valid as a React child"
谬误。为了解决该谬误,在 JSX 代码中,应用 map()
办法来渲染数组或者拜访对象的属性。
上面是谬误如何产生的示例。
export default function App() {
const employees = [{id: 1, name: 'Alice', country: 'Austria'},
{id: 2, name: 'Bob', country: 'Belgium'},
{id: 3, name: 'Carl', country: 'Canada'},
];
const obj = {
id: 4,
name: 'Dean',
country: 'Denmark',
};
// ⛔️ Uncaught Error: Objects are not valid as a React child (found: object with keys {id, name, country}).
// If you meant to render a collection of children, use an array instead.
return (
<div>
{employees}
{obj}
</div>
);
}
map
上述代码片段的问题在于,在 JSX 代码中咱们尝试间接渲染数组或者对象。
为了解决该谬误,当渲染 JSX 代码时,应用 map()
办法来渲染数组或者拜访对象的属性。
export default function App() {
const employees = [{id: 1, name: 'Alice', country: 'Austria'},
{id: 2, name: 'Bob', country: 'Belgium'},
{id: 3, name: 'Carl', country: 'Canada'},
];
const obj = {
id: 4,
name: 'Dean',
country: 'Denmark',
};
return (
<div>
{employees.map((employee, index) => {
return (<div key={index}>
<h2>name: {employee.name}</h2>
<h2>country: {employee.country}</h2>
<hr />
</div>
);
})}
<hr />
<hr />
<hr />
<div>
<h2>name: {obj.name}</h2>
<h2>county: {obj.country}</h2>
</div>
<hr />
</div>
);
}
当调试时,能够应用 console.log
来打印导致谬误的值。
JSON.stringify
或者,你能够在 JSX 代码中应用 JSON.stringify()
转换该值,以确保它是预期的类型。
export default function App() {
const employees = [{id: 1, name: 'Alice', country: 'Austria'},
{id: 2, name: 'Bob', country: 'Belgium'},
{id: 3, name: 'Carl', country: 'Canada'},
];
const obj = {
id: 4,
name: 'Dean',
country: 'Denmark',
};
return (
<div>
<h4>{JSON.stringify(employees)}</h4>
<h4>{JSON.stringify(obj)}</h4>
</div>
);
}
JSON.stringify()
办法将会在对象渲染之前,将其转换为字符串。
你必须确保在 JSX 代码中,不会渲染对象或者数组。相同,你必须渲染原始值,比如说字符串以及数值。
Date
另一个导致该谬误的常见起因是,在 JSX 代码中咱们试图间接渲染 Date
对象时。
export default function App() {const date = new Date();
// ⛔️ Objects are not valid as a React child (found: [object Date]).
return (
<div>
<h4>{date}</h4>
</div>
);
}
为了解决该问题,咱们必须拜访 Date
对象上的办法,比如说,toLocaleDateString()
。
export default function App() {
return (
<div>
<h4>{date.toLocaleDateString()}</h4>
</div>
);
}
当初,咱们应用字符串代替对象来进行渲染,因而该谬误被解决。
花括号
如果谬误仍旧存在,请确保当渲染变量时,你没有应用双花括号。
export default function App() {
const message = 'hello world';
// ⛔ Objects are not valid as a React child (found: object with keys {message}).
return (
<div>
<h4>{{message}}</h4>
</div>
);
}
留神 message
变量包裹在两组花括号内,这也是为什么 React 认为尝试渲染一个对象。为了解决该问题,能够只将变量包裹在一组大括号中。
export default function App() {
return (
<div>
<h4>{message}</h4>
</div>
);
}
当初 React 把 message
变量当作一个蕴含字符串的表达式,而不是一个对象。
async
如果谬误仍旧存在,请确保在 JSX 代码中没有调用 async
函数。
async
函数返回一个 Promise
对象,因而在 JSX 代码中,如果调用了 async
函数,则谬误就会产生。
export default function App() {async function getData() {return Promise.resolve(42);
}
// ⛔ Objects are not valid as a React child (found: [object Promise]).
return (
<div>
<h4>{getData()}</h4>
</div>
);
}
为了解决该谬误,咱们必须在 useEffect
钩子或者事件处理器里调用 async
函数,比如说,onClick
。
import {useEffect, useState} from 'react';
export default function App() {const [num, setNum] = useState(0);
useEffect(() => {async function getData() {const result = await Promise.resolve(42);
setNum(result);
}
getData();}, []);
return (
<div>
<h4>{num}</h4>
</div>
);
}
在 useEffect
钩子中调用 async
函数能够解决这个谬误,因为咱们当初渲染的是一个数字,而不是 Promise
对象。
总结
产生 "Objects are not valid as a React child"
的 React 谬误有多种起因:
- 在 JSX 代码中间接渲染对象或者数组;
- 在 JSX 代码中间接渲染
Date
对象; - 在两组花括号中包裹变量,比方:
{{message}}
而不是{message}
; - 在 JSX 代码中调用
async
函数。