React调用OMdb API后props.movies.map is not a function报错如何解决

报错的核心原因是props.movies的实际类型不是数组，没有map方法：

• 你初始化movies state时赋值是空数组，但是你调用的OMDb API用了i参数（单条电影查询参数），返回结果是单个电影对象，不是数组。你直接把这个对象赋值给movies，覆盖了初始的数组类型。
• 你之前手动写入JSON数据时是直接写的数组结构，所以map调用正常，换成API请求后类型不匹配就触发了报错。

你可以根据需求选择以下任意一种方案修复，同时建议加兜底逻辑避免后续类似报错：

方案1：调整API请求为多结果查询 #

如果需要展示多个电影列表，把请求参数从i换成s（关键词搜索参数），OMDb的多结果查询返回的Search字段才是电影数组：

const getMovies = async () => {
  try {
    // 替换i参数为s参数，传入你需要搜索的关键词，比如action
    const url = `http://www.omdbapi.com/?s=action&apikey=${API_KEY}`;
    const response = await fetch(url);
    const data = await response.json();
    // 接口返回成功时取Search字段的数组，否则赋值空数组
    setMovies(data.Search || []);
  } catch (e) {
    console.error(e);
    // 请求报错也赋值空数组，避免类型异常
    setMovies([]);
  } 
}

方案2：单条结果场景包装为数组 #

如果你就是要测试当前查询的单条电影，把返回的单个对象包装成数组再赋值给state：

const getMovies = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    // 单个对象包装为数组
    setMovies([data]);
  } catch (e) {
    console.error(e);
    setMovies([]);
  } 
}

额外兜底优化 #

可以在MoviesList组件调用map前加类型判断，避免后续其他场景触发同类报错：

// 先判断props.movies是数组再调用map，不是数组就用空数组兜底
const movieSplide = (Array.isArray(props.movies) ? props.movies : []).map((movie, index) => {
  // 原有渲染逻辑不变
})

另外你备份代码里的const responseJson = JSON.parse(data);属于多余操作，response.json()已经把响应体转换成了JS对象，不需要额外调用JSON.parse，后续编码中可以去掉这步操作。

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