React中使用React Geocode返回fulfilled Promise，如何获取实际地址值？

问题根因 #

getAddress是async异步函数，默认返回Promise对象，你在showPosition回调中直接将其返回值赋值给userAddress，存储的自然是Promise实例而非最终的地址结果。

解决方案 #

方案1：获取坐标后同步等待地址结果再更新state

将showPosition改为异步函数，等待getAddress返回结果后一次性更新完整的定位信息，推荐使用函数式更新state避免闭包问题：

const showPosition = async (position) => {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
  const address = await getAddress(lat, lng);
  setUserLocation(prev => ({
    ...prev,
    lat,
    lng,
    userAddress: address || '地址获取失败'
  }))
}

方案2：拆分state更新逻辑，监听坐标变化自动拉取地址

如果后续有多处修改坐标的场景，推荐拆分逻辑，先更新经纬度，再通过useEffect监听经纬度变化自动获取地址：

// 只更新经纬度
const showPosition = (position) => {
  setUserLocation(prev => ({
    ...prev,
    lat: position.coords.latitude,
    lng: position.coords.longitude
  }))
}

// 监听经纬度变化，拉取对应地址
useEffect(() => {
  if (!userLocation.lat || !userLocation.lng) return;
  const fetchAddress = async () => {
    const address = await getAddress(userLocation.lat, userLocation.lng);
    setUserLocation(prev => ({
      ...prev,
      userAddress: address || '地址获取失败'
    }))
  }
  fetchAddress();
}, [userLocation.lat, userLocation.lng])

优化建议 #

可以在getAddress的catch分支中返回兜底文案，避免地址获取失败时返回undefined：

const getAddress = async (lat, lng) => {
  try {
    const res = await Geocode.fromLatLng(lat, lng)
    return res.results[0].formatted_address;
  } catch (err) {
    console.log(err.message)
    return '地址获取失败'
  }
}

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