React Native中从Google Maps API提取城市名失败求助

核心问题 #

网页里用的$.each是jQuery专属方法，React Native环境默认不支持jQuery，得换成原生JavaScript数组操作；另外原代码里直接判断val['types'] == "locality,political"逻辑有误——Google Maps返回的types是数组类型，不是字符串，直接全等对比会失效。

解决方案代码 #

修改axios回调里的数据处理逻辑，用原生JS数组遍历方法替代jQuery，并修正types的判断方式：

axios({
  method: 'get',
  url: `https://maps.googleapis.com/maps/api/geocode/json?&key={my_key}&latlng=${latitude},${longitude}`
}).then((response) => {
  const { results } = response.data;
  let city = '';

  // 遍历所有结果项
  results.forEach(result => {
    // 遍历当前结果的地址组件
    result.address_components.forEach(component => {
      // 判断当前组件是否为城市级别的行政区划
      const isLocality = component.types.includes('locality');
      const isPolitical = component.types.includes('political');
      
      if (isLocality && isPolitical && component.long_name) {
        city = component.long_name;
        return false; // 找到目标后终止内层遍历
      }
    });
    if (city) return false; // 找到城市名后终止外层遍历
  });

  if (city) {
    console.log('提取到的城市名:', city);
    // 这里可将city存入状态或做后续业务处理
  } else {
    console.log('未匹配到城市信息');
  }
}).catch(error => {
  console.error('API请求失败:', error);
});

关键优化说明 #

• 原生JS替代jQuery：用数组forEach方法替代$.each，React Native完全支持原生JS数组操作，无需额外引入库。
• 修正types判断逻辑：Google Maps返回的types是字符串数组（例如["locality", "political"]），用includes方法判断数组内是否包含指定元素，比直接对比字符串更准确。
• 提前终止遍历：找到城市名后立即停止内层和外层循环，减少不必要的计算，提升代码性能。

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