React无法访问JSON API嵌套对象且报对象不能作为React子元素错误

报错根源说明 #

你收到的Objects are not valid as a React child报错，核心原因是你直接在JSX中渲染了barrel.owner对象：React不支持直接将对象作为子元素渲染，只有字符串、数字等基础类型可以直接渲染。

具体解决步骤 #

1. 修正嵌套属性读取写法 #

首先你代码里有两个字段读取错误：

• API返回结构中没有title字段，对应名称字段是name，需要把barrel.title改为barrel.name
• 不要直接渲染barrel.owner，要明确读取你需要展示的嵌套属性，比如所有者姓名、邮箱等
  修正后的渲染部分代码如下：

{ barrel && (
  <div>
    <h2>{ barrel.name }</h2>
    <p>Ansprechpartner { barrel.owner.name }（联系邮箱：{barrel.owner.email}）</p>
    <p>Standort: { barrel.city }</p>
    <Bookbarrel />
  </div>
)}

如果存在owner可能为空的场景，可以用可选链操作符做兼容，避免属性读取报错：

<p>Ansprechpartner { barrel.owner?.name ?? '无所有者信息' }</p>

2. 修复详情页请求路径错误 #

你当前useFetch的请求地址缺少http协议前缀，浏览器会将其识别为相对路径导致请求失败，修改为完整路径：

const { data: barrel, error, isPending } = useFetch(`http://localhost:8000/api/barrels/${id}`);

3. 排查主列表数据失效问题 #

按以下顺序排查：

• 先直接在浏览器地址栏访问你当前用的接口地址https://devsauna.de/api/barrels/，确认接口可以正常返回、结构和你给出的示例一致，没有跨域、权限拦截问题
• 在useEffect的第二个then回调中加console.log(data)，确认请求返回的数据是预期的数组结构，setBarrels可以正常赋值
• 检查列表组件的渲染逻辑，确认没有直接渲染owner对象的写法，所有嵌套属性都明确读取了具体字段
• 如果是React18开发环境下的严格模式，useEffect会执行两次，确认接口没有防重复请求的限制

内容的提问来源于stack exchange，提问作者bigfatbird