React Geocode 包 returns 在 React 中实现了 Promise 对象

Question

我有一个状态，用于在页面加载时接收用户位置。

  const [userLocation, setUserLocation] = useState({
    lat: null,
    lng: null,
    userAddress: ''
  })

我创建了一个 getAddress 函数，它的目的是 return 使用 react Geocode npm 包

基于坐标的地址的字符串值

  const getAddress = async (lat, lng) => {
    try {
      const res = await Geocode.fromLatLng(lat, lng)
      const address = res.results[0].formatted_address;
      return address

    } catch (err) {
      console.log(err.message)
    }

  }

我的 getUserLocation 函数运行在页面加载时的 useEffect 中

  const getUserLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
  }

  const showPosition = (position) => {
    setUserLocation({
      ...userLocation,
      lat: position.coords.latitude,
      lng: position.coords.longitude,
      userAddress: getAddress(position.coords.latitude, position.coords.longitude)
    })
  }

我的 userLocation 对象 returning 如下：

USER LOCATION 
{lat: 43.829601, lng: -79.470408, userAddress: Promise}
lat: 43.829601
lng: -79.470408
userAddress: Promise
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "126 Seabreeze Ave, Thornhill, ON L4J 9H1, Canada"
[[Prototype]]: Object

我希望 promise 结果值被 returned，显然没有别的。有什么解决办法吗？

Answer 1

因为异步函数 return 一个承诺，调用一个将返回承诺，而不是结果。

这里是直接调用getAddress:

userAddress: getAddress(position.coords.latitude, position.coords.longitude)

但是，如果您想要结果，则必须使 showPosition 异步，并且 await 来自 getAddress 的结果：

const showPosition = async (position) => {
    setUserLocation({
      ...
      ...
      ...
      userAddress: await getAddress(position.coords.latitude, position.coords.longitude)
    })
  }

React Geocode 包 returns 在 React 中实现了 Promise 对象

React Geocode package returns fulfilled Promise object in React

javascript

promise

google-geocoder

reactjs