遍历API响应数据时遇TypeError：无法解构undefined的city属性

错误原因分析 #

• Object.entries(data)返回的是[键名, 对应值]格式的数组，直接访问entry.adUnits会得到undefined——数组不存在这个属性。
• 未对传入getLatLong的参数做空值校验，即便拿到正确数据，也可能存在adUnits为undefined或null的情况。

修复步骤 #

1. 修正遍历逻辑 #

从Object.entries(data)返回的键值对数组中，取第二个元素（索引1）作为当前项，再从中获取adUnits，同时增加存在性校验：

const fetchAdsunit = async () =>{
  const {data} = await axios.get(ADUINTS_API)

  for (const [key, item] of Object.entries(data)) {
    if (item?.adUnits) {
      const latLong = await getLatLong(item.adUnits)
      console.log(latLong); 
    }
  }
}

2. 给getLatLong添加参数校验 #

在解构前先判断adUnits是否有效，避免解构报错，同时修正过滤假值的写法：

const getLatLong = async (adUnits) => {
  if (!adUnits) {
    console.error('adUnits 参数不能为空');
    return null;
  }

  const { city, country, latitude, longitude, region, zip } = adUnits;
  const searchKey = [city, country, latitude, longitude, region, zip]
    .filter(Boolean)
    .join(',')
    .replaceAll(" ", "&");
  const { data } = await axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${searchKey}.json?access_token=pk.eyJ1IjoiYXluZXJkIiwiYSI6ImNsNXd2d3dsNTBnbGczaXBzNDZsZHY3c3gifQ.D83CJ8cPbVnHimjcW0efNg`);

  return data
}

额外注意点 #

• 原代码中filter([Boolean])是错误写法，应改为filter(Boolean)才能正确过滤假值（null、undefined、空字符串等）。
• Mapbox地理编码请求中，多参数用逗号分隔更符合规范，因此将join()改为join(',')。

内容的提问来源于stack exchange，提问作者Ayb.ayw