使用.map遍历Skyscanner API数据时出现.map is not a function错误

问题根源 #

你打印的flightListings.content.results.agents是键值对对象，而.map()是JavaScript数组的专属方法，对象本身没有这个方法，直接调用就会报错。

解决办法 #

用Object.values()把对象里的所有值提取出来转成数组，这样就能正常用.map()遍历了。如果需要用到对象的键（比如vgwl、wizz这类标识），可以用Object.entries()，它会返回[键, 值]格式的数组。

修改后的页面代码（仅遍历值） #

export default async function Home() {
  const flightListings = await getFlightListings();
  // 把对象转换为值数组
  const agentsArray = Object.values(flightListings.content.results.agents);

  return (
    <div className="pt-10">
      <p className="text-xl">Flights</p>
      <div className="pt-2">
        {agentsArray.map((item) => (
          // 必须加唯一key，NextJS列表渲染要求
          <div key={item.name}>{item.name}</div>
        ))}
      </div>
    </div>
  );
}

若需要用到对象键的情况 #

export default async function Home() {
  const flightListings = await getFlightListings();
  // 获取[键, 值]结构的数组
  const agentsEntries = Object.entries(flightListings.content.results.agents);

  return (
    <div className="pt-10">
      <p className="text-xl">Flights</p>
      <div className="pt-2">
        {agentsEntries.map(([agentKey, item]) => (
          <div key={agentKey}>
            标识：{agentKey} | 名称：{item.name}
          </div>
        ))}
      </div>
    </div>
  );
}

额外提醒 #

• 列表渲染时一定要给每个元素加唯一key属性，这是React/NextJS的要求，能避免不必要的重渲染。
• 要是不确定API返回的是数组还是对象，可以加个判断兜底：

const agents = flightListings.content.results.agents;
const agentsArray = Array.isArray(agents) ? agents : Object.values(agents);

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