使用useEffect与fetch时出现React子元素无效错误求助

错误本质 #

你遇到的Error: Objects are not valid as a React child错误，核心原因是在JSX中直接渲染了完整的电影对象——React只允许渲染原始数据类型（字符串、数字、布尔值）或合法的React元素，无法直接解析包含多个键值对的对象。

问题定位 #

你的两个useEffect请求逻辑完全正常：都是从TMDB接口获取电影列表数组，将data.results（每个元素是包含title/id等字段的电影对象）存入状态。之所以其中一个报错、另一个正常，问题出在状态的渲染代码，而非请求逻辑：

• 正常的状态（比如results），你在渲染时提取了对象的具体属性（比如movie.title）；
• 报错的状态（比如categoryContent），你在渲染时直接把整个电影对象当作了React子元素。

错误示例与修正 #

错误写法（触发报错） #

// 直接渲染整个电影对象，React无法解析
{categoryContent.map(movie => (
  <div>{movie}</div>
))}

正确写法（解决报错） #

提取电影对象的具体属性进行渲染，同时记得给列表项加唯一key：

{categoryContent.map(movie => (
  <div key={movie.id}>
    <h3>{movie.title}</h3>
    <p>{movie.overview}</p>
    {/* 按需渲染其他属性，如海报、评分等 */}
  </div>
))}

排查步骤 #

1. 找到渲染results或categoryContent的JSX代码段；
2. 检查是否存在直接渲染数组元素（完整电影对象）的情况；
3. 将其替换为渲染对象的具体字段（如title、overview等）。

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