如何解决JavaScript调用API时Cannot read property '0' of undefined错误

报错原因 #

报错行const { "release-group": album } = record.releases[0]触发错误的核心是：API返回的部分record（录音）数据没有关联对应的发行专辑，因此releases字段为undefined、null或者空数组，此时直接访问record.releases[0]就会抛出Cannot read property '0' of undefined错误。
另外你当前用map方法遍历但没有返回新数组，属于方法误用，此处改用forEach遍历更符合语义。

解决方法 #

你可以用ES6+的可选链操作符?.加空值合并运算符??处理缺省场景，也可以加前置校验跳过无releases的无效数据，以下是两种常用实现：

方案1：跳过无有效releases的记录 #

const showEverything=(artist, album,mytracks) => {
  let everythingObj={
    name    :[],
    title   :[],
    album   :[],
    id      :[]
  }

  const recordings=artist.recordings;
  // 改用forEach遍历
  recordings.forEach((record) => {
    const { "artist-credit": credit } = record;
    // 先判断releases是否存在且有值，无值直接跳过本条记录
    if(!record.releases?.length) return
    const firstRelease = record.releases[0]
    const { "release-group": album } = firstRelease
    // 同步给credit加缺省校验，避免同类报错
    everythingObj.name.push(credit?.[0]?.name ?? '未知艺术家');
    everythingObj.title.push(record.title);
    everythingObj.album.push(album?.title ?? '未知专辑');
    everythingObj.id.push(firstRelease.id);
  })
}

方案2：所有记录都保留，缺值用默认值填充 #

const showEverything=(artist, album,mytracks) => {
  let everythingObj={
    name    :[],
    title   :[],
    album   :[],
    id      :[]
  }

  const recordings=artist.recordings;
  recordings.forEach((record) => {
    const { "artist-credit": credit } = record;
    const firstRelease = record.releases?.[0] ?? {}
    const album = firstRelease["release-group"] ?? {}
    everythingObj.name.push(credit?.[0]?.name ?? '未知艺术家');
    everythingObj.title.push(record.title ?? '未知曲目');
    everythingObj.album.push(album.title ?? '未知专辑');
    everythingObj.id.push(firstRelease.id ?? '');
  })
}

如果你的运行环境不支持可选链语法，可以用传统的逻辑与判断替代，比如把record.releases?.[0]换成record.releases && record.releases[0]即可。

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