React调用MovieDB API报错：this.state.movies.map不是函数

这个错误的核心原因很明确：你尝试在非数组类型的数据上调用map方法，咱们一步步拆解问题并修复：

1. 问题根源：API响应结构理解偏差 #

MovieDB的搜索API返回的不是直接的电影数组，而是一个包含数组的对象。它的响应结构大概是这样的（简化版）：

{
  "page": 10,
  "results": [/* 这里才是你需要的电影数据数组 */],
  "total_pages": 20,
  "total_results": 198
}

你现在的代码里直接把整个响应对象res.data赋值给了movies状态，相当于movies变成了一个对象，而非数组——对象自然没有map方法，所以控制台会抛出那个类型错误。

2. 两步修复代码 #

第一步：修正Axios回调的状态赋值 #

把API响应里的results数组取出来赋值给movies，同时加个兜底判断避免空值问题：

axios.get(searchQuery).then(res => {
  // 用|| []确保即使results不存在，movies依然是数组
  this.setState({ movies: res.data.results || [] });
});

第二步：修正渲染时的取值逻辑 #

你之前写的movie.results.title是错误的——因为map遍历的是results数组里的单个电影对象，直接取movie.title即可：

<ul>
  {this.state.movies.map(movie => (
    <li key={movie.id}>{movie.title}</li>
  ))}
</ul>

3. 额外优化建议 #

可以给空状态加个提示，提升用户体验：

<ul>
  {this.state.movies.length === 0 ? (
    <li>没有找到相关电影，请尝试其他关键词~</li>
  ) : (
    this.state.movies.map(movie => (
      <li key={movie.id}>{movie.title}</li>
    ))
  )}
</ul>

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