enter image description here]1rybody我正在构建一个基于位置的组件,需要使用城市名称将其通过API的get请求传递,就像这样axios.get(/${cityName}/JSON
);
在我编写的组件中,有些时候工作得很好,但大多数时候都给出了该错误(null不是对象(评估'location.coords']])]
如何克服这个问题,以及如何使用经度或纬度或其他任何方法单独获得cityName
import React, { useState, useEffect } from 'react';
import { Platform, Text, View, Button } from 'react-native';
import Constants from 'expo-constants';
import * as Location from 'expo-location';
export default function App() {
const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
const [city, setCity] = useState('');
const getLocation = async () => {
let { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
}
let location = await Location.getCurrentPositionAsync({});
setLocation(location);
console.log(location);
}
const getCity = async () => {
const place = await Location.reverseGeocodeAsync({
latitude : location.coords.latitude,
longitude : location.coords.longitude
});
setCity(place.city);
console.log(city);
}
useEffect(() => {
getLocation() , getCity();
} , []);
let text = 'Waiting..';
if (errorMsg) {
text = errorMsg;
} else if (location) {
text = JSON.stringify(location);
}
return (
<View >
<Text> </Text>
<Button title = 'press'
onPress = {getCity}
/>
</View>
);
}
useEffect(() => {
getLocation() , getCity();
} , []);
这两个函数都是异步的,但这不能保证它们将按该顺序发生。而且,发生的是这些函数并行运行,这会导致您的错误。
您在这里有多种选择:-您可以将多个Promise链接在一起以确保执行顺序-您可以从上述useEffect中删除getCity调用,并仅在完成getLocation调用后才调用它(不允许用户在此之前进行交互)