axios.get调用报错：response.data.map is not a function 求助

嘿，我帮你揪出问题啦！你遇到的这个错误，核心原因很简单：你尝试给一个对象调用数组的map方法，这当然行不通啦～

为什么会出错？ #

你请求的LOL英雄数据接口返回的JSON结构，并不是直接的数组。它的结构大概是这样的：

{
  "type": "champion",
  "version": "6.24.1",
  "data": {
    "Aatrox": { /* 英雄详细数据 */ },
    "Ahri": { /* 英雄详细数据 */ },
    // ...其他英雄
  }
}

你之前直接用response.data.map()，但response.data是整个外层对象，根本不是数组，自然没有map方法。真正的英雄数据存在response.data.data里，而且这是一个以英雄名为键的对象，同样不是数组，所以直接用map还是会报错。

怎么解决？ #

我们需要把这个英雄对象转换成数组，JavaScript提供了很方便的方法：

• 如果你只需要英雄的详细数据，用Object.values()提取对象的所有值，直接生成数组
• 如果需要同时保留英雄名称（比如Aatrox、Ahri），可以用Object.entries()结合map来处理

修正后的代码（只取英雄数据）

router.get("/", (req, res, next)=>{ 
  axios.get("http://ddragon.leagueoflegends.com/cdn/6.24.1/data/en_US/champion.json") 
  .then( (response)=>{ 
    // 把英雄对象转成数组
    const championArray = Object.values(response.data.data);
    res.render("champions", { champs: championArray }); 
  }) 
  .catch((err)=>{ console.log(err); }); 
});

进阶版（保留英雄名称）

如果你希望前端能直接拿到英雄的名字，可以这样处理：

router.get("/", (req, res, next)=>{ 
  axios.get("http://ddragon.leagueoflegends.com/cdn/6.24.1/data/en_US/champion.json") 
  .then( (response)=>{ 
    // 提取键值对，转成包含名称和数据的对象数组
    const championArray = Object.entries(response.data.data).map(([champName, champData]) => ({
      name: champName,
      ...champData
    }));
    res.render("champions", { champs: championArray }); 
  }) 
  .catch((err)=>{ console.log(err); }); 
});

这样处理后，championArray就是标准的数组了，前端就能正常遍历调用啦～

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