React-Native 地理位置承诺无法正确链接

Question

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

我在将地理位置与谷歌的反向地理编码器 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},
)

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

我不断遇到的问题肯定与JavaScript的Fetch的异步性质有关。我不断收到以下错误：

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

我知道有一种更好的方法来处理所有这些，看看 Redux 可以更好地处理我的状态。但现在我需要启动并运行它。

我也知道我的异步和等待到处都是，可能没有必要/导致错误。我没有反应原生的经验，更不用说反应了，希望有人能帮我解决这个问题。

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

非常感谢！

Answer 1

你用async/await使事情过于复杂 - 真的不需要这么"简单"的代码

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
})
})