地理位置坐标没有准备好geolib处于反应原生状态

Question

我在反应原生物上使用geolib并将其与地理位置集成。我想要从当前位置lat/long到另一个位置的lat/long。当我这样做，它弹出错误：null不是一个对象（评估“point.hasOwnProperty”上修复任何想法

componentDidMount() { 
navigator.geolocation.getCurrentPosition(
    (position) => { 
    this.setState({ 
     latitude: position.coords.latitude, 
     longitude: position.coords.longitude, 
     error: null, 
    }); 
    } 
); 
} 

render() { 

const lat = this.state.latitude; 
const long = this.state.longitude; 

let c = geolib.getDistance(
{latitude: lat, longitude: long}, //error occurs HERE 
{latitude: 36.204824, longitude: 138.252924} 
); 

return (
    <Text>Distance: {c} kms</Text> 
); 
} 

Answer 1

这可能是因为以下是异步的，这意味着它给？出结果一切之后，已经加载：

navigator.geolocation.getCurrentPosition(
    (position) => { 
    this.setState({ 
     latitude: position.coords.latitude, 
     longitude: position.coords.longitude, 
     error: null, 
    }); 
    } 
); 

在第一渲染，this.state.latitude将是无效的：

const lat = this.state.latitude; 
const long = this.state.longitude; 

尝试在render（）方法的开头添加此：

if (this.state.latitude == null) return null; 

这会阻止第一次渲染。第二次渲染时，this.state.latitude将准备就绪。