调用map遇TypeError，请求TMDB数据遭解析问题求助

咱们一步步拆解你遇到的问题，先搞定根源错误，再解决后续的map调用问题：

1. 先修复Unexpected token o in JSON at position 1错误 #

这个报错几乎是重复解析JSON的典型表现：当你对一个已经是JavaScript对象的值调用JSON.parse()时，JS会先把对象转成字符串"[object Object]"，而这个字符串不是有效的JSON格式，开头的o就是触发报错的原因。

结合你的XMLHttpRequest代码，大概率是这两种情况：

• 你在请求中设置了request.responseType = 'json'，浏览器已经自动把响应体解析成了JS对象，不需要再手动JSON.parse()；
• 部分环境下，XMLHttpRequest的response会被自动处理为对象，无需额外解析。

修复后的getData函数示例： #

export const getData = (url) => new Promise((resolve, reject) => {
  const request = new XMLHttpRequest();
  request.open('GET', url);
  
  // 推荐设置这个，让浏览器自动完成JSON解析
  request.responseType = 'json';
  
  request.onload = () => {
    if (request.status >= 200 && request.status < 300) {
      // 直接返回解析好的对象，不用再JSON.parse
      resolve(request.response);
    } else {
      reject(new Error(`请求失败，状态码：${request.status}`));
    }
  };
  
  request.onerror = () => {
    reject(new Error('网络请求出错'));
  };
  
  request.send();
});

之后在中间件里直接获取results：

// 此时response已经是解析后的对象，无需JSON.parse
let arr = response.results;

2. 解决TypeError: Cannot read property 'map' of undefined错误 #

这个错误是因为你尝试对undefined调用map方法，根源是arr没有被正确赋值——可能是上面的解析错误导致arr为undefined，也可能是TMDB返回的结构里没有results字段。

安全调用map的修复方案： #

在执行map之前，务必先检查arr是否是有效的数组：

// 先确认arr存在且是数组类型
if (Array.isArray(arr)) {
  // 安全执行map处理
  const processedData = arr.map(item => {
    // 你的数据处理逻辑
    return {
      id: item.id,
      title: item.title,
      // ...其他需要的字段
    };
  });
} else {
  // 打印日志排查问题
  console.error('预期results是数组，但实际得到：', arr);
  console.error('完整响应数据：', response);
}

额外排查建议： #

在浏览器控制台打印完整的response对象，确认TMDB返回的结构是否符合预期——有时候可能因为API参数错误，返回的是错误信息（比如status_message）而非带results的数据集，这时候需要先处理错误场景。

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