Question

编辑：我已经清理了异步并等待，也删除了重复的代码

我遇到一些问题，让地理定位与google的反向地理编码器API配合使用。我正在使用react-native 0.51以及Fetch API。我一直在使用Android Studio的虚拟设备模拟器运行并测试我的代码。

const convertCoords = (position) => {
  return fetch(`https://maps.googleapis.com/maps/api/geocode/jsonlatlng=${position.coords.latitude},${position.coords.longitude}&key=API-KEY`)
  .then((response) => response.json())
  .then((location) => {
    this.setState({
      address: location.results[0].formatted_address,
      longitude: location.results[0].geometry.location.lng,
      latitude: location.results[0].geometry.location.lat
    })
  })
}

我正在使用componentDidMount()在此块中进行API调用：

navigator.geolocation.getCurrentPosition(
  (position) => convertCoords(position),
  (error) => this.setState({ error: error.message }),
  { enableHighAccuracy: true, timeout:20000, maximumAge: 1000},
)

我的目标是将经度，纬度和地址设置为状态，这样我就可以向用户显示地址，然后保持long和lat以便稍后发送到数据库。

我一直遇到的问题绝对与JavaScript的Fetch的异步性有关。我一直收到以下错误：

TypeError: undefined is not an object (evaluating 'response.json')

我知道有更好的方法来处理所有这些，看着Redux更好地处理我的状态。但是现在我需要让它运行起来。

我也知道我的asyncs和awaits到处都是，可能没必要/导致错误。我不会有反应原生的经验，更不用说反应了，希望有人可以帮我清除这一点。

如果您需要我的更多信息，请随时联系我们！

非常感谢你！

Answer 1

您使用async / await过度复杂的事情 - 在这样的＆＃34;简单＆＃34;中真的没有必要。代码

const convertCoords = position => fetch(`https://maps.googleapis.com/maps/api/geocode/jsonlatlng=${position.coords.latitude},${position.coords.longitude}&key=API-KEY`)
    .then(response => response.json())
    .then(location => this.setState({
        address: location.results[0].formatted_address,
        longitude: location.results[0].geometry.location.lng,
        latitude: location.results[0].geometry.location.lat
    }));



navigator.geolocation.getCurrentPosition(
    position => convertCoords(position),
    error => this.setState({
        error: error.message
    }), {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 1000
    },
)

但是，我认为您真正的问题是您似乎错误地复制了一些代码

navigator.geolocation.getCurrentPosition(
  async (position) => {
    convertCoords(position)
  },
  (error) => this.setState({ error: error.message }),
  { enableHighAccuracy: true, timeout:20000, maximumAge: 1000},
) 
// code below shouldn't be there at all, it's a duplicate of `convertCoords` code
.then((response) => response.json())
.then(async (location) => {
  await this.setState({
    address: location.results[0].formatted_address,
    longitude: location.results[0].geometry.location.lng,
    latitude: location.results[0].geometry.location.lat
  })
})

React-Native地理位置承诺不能正确链接

1 个答案: