React调用Spotify API：数据可打印但album.image访问返回undefined

核心原因：字段名拼写错误 #

你在SongCard组件中尝试访问的album.image是错误的，API返回的专辑图片字段是复数形式的images，而非单数image。

验证API响应结构 #

从你提供的API返回数据可以看到，专辑对象下的图片数组明确标注为images：

"album": {
  "album_group": "single",
  "album_type": "single",
  // ...其他字段省略
  "images": [
    {
      "height": 640,
      "url": "https://i.scdn.co/image/ab67616d0000b27321c0833c690bcca5d918e18e",
      "width": 640
    },
    // ...更多图片项
  ]
}

修复方案 #

1. 在SongCard组件中，将访问路径从album.image改为album.images。通常我们会取数组中的第一个图片（最高分辨率）：

   // 示例：获取专辑封面图片URL
   const coverUrl = album.images[0].url;
   

2. 为了避免数据加载过程中或数组为空时出现报错，建议添加空值保护：

   const coverUrl = album?.images?.[0]?.url || '你的默认图片地址';
   

额外优化建议 #

• 播放页面中有一处拼写错误：setCurrentTack应该是setCurrentTrack，虽然当前不影响功能，但可能引发后续逻辑问题，建议修正。
• 在播放页面渲染SongCard时，添加条件判断确保currentTrack.album存在后再渲染，避免初始状态下的空值报错：

  <div className="rightPlayer">
    {currentTrack.album && <SongCard album={currentTrack.album} />}
    <Queue />
  </div>
  

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