如何修复React开发中Objects are not valid as a React child报错

云上老周

2026-9-30

报错核心原因

该报错是因为你直接把对象类型的值放到了JSX中渲染，React不支持直接渲染普通JS对象。

具体错误点

第一个错误：EventCard组件的参数接收逻辑错误
React函数组件只会接收一个props对象作为入参，你当前的写法没有解构props，相当于把整个props对象赋值给了第一个参数additional，后续声明的diet、name、scientificName、size全都是未定义值。如果你要渲染additional字段（它本身就是对象类型），就会直接触发这个报错。
修复方法：给参数加一层大括号解构props：
```
export default function EventCard({
  additional,
  diet,
  name,
  scientificName,
  size
}) {
```
第二个错误：数组类型的diet字段未做处理直接渲染
diet是字符串数组，虽然React可以直接渲染纯字符串数组，但展示出来的内容是没有分隔符的拼接字符串，不符合展示需求，建议用分隔符拼接或者遍历渲染：
```
{/* 用顿号分隔示例 */}
<div>{diet.join('、')}</div>
```
第三个错误：可选字段additional没有做空兼容
数据里第一个动物项没有additional字段，如果你要渲染该字段下的内容，需要加可选链判断，避免访问undefined的属性报错，也不要直接渲染additional对象本身：
```
{/* 渲染备注示例 */}
{additional?.notes && <p>{additional.notes}</p>}
```
额外问题：App.js的路由结构不合理
你当前把路由容器和卡片列表平级，会导致所有路由页面都会同时展示卡片列表，建议把卡片列表放到对应路由的页面组件（比如首页Home）内部。