geolib在反应原生状态下未准备好地理位置坐标

Posted 2021-04-18

我在反应原生中使用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>
);
}

答案

这可能是因为以下是异步，这意味着它在已经加载其他所有内容后给出结果：

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

在第一次渲染时，this.state.latitude将为null：

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

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

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

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