Я работаю над рендерингом карт Google в ReactJS. Для этого я использую библиотеку «act-google-maps ». Логический поток есть; при загрузке страницы найдите местоположение пользователя и нанесите его на карту.
Пользователю предоставляются навигационные ссылки для перехода на другой URL. Для управления навигацией я использую роутер React. Местоположение пользователя идентифицируется в componentWillMount (), затем устанавливается соответствующее состояние, и карта отображается в render ().
Проблема в том, что render () вызывается перед завершением componentWillMount (), он получает нулевые значения и завершается ошибкой. Эта ситуация возникает только при маршрутизации на стороне клиента, а не при рендеринге на стороне сервера.
Чтобы ограничить способ выполнения, я сделал componentWillMount () как асинхронный метод, в котором он ожидает, пока не будет определено местоположение пользователя. Тем не менее, это не помогло.
state = {
homeLocation: {},
coordinates: []
}
async componentWillMount(props) {
const { lat,lng } = await this.getcurrentLocation();
this.setState({
homeLocation:{
lat: lat,
lng: lng
}
})
}
getcurrentLocation() {
if (window.navigator && window.navigator.geolocation) {
return new Promise((resolve, reject) => {
window.navigator.geolocation.getCurrentPosition(pos => {
const coords = pos.coords;
resolve({
lat: coords.latitude,
lng: coords.longitude
});
});
});
}
return {
lat: 0,
lng: 0
};
}
render(){
<MapWithAMarker
// necessary parameters
/>
}
//Routers
const AppRouter = () => (
<Router>
<div>
<Switch>
<Route path="/" component={MapHomeLocation} exact={true}/>
<Route path="/location/:locationType" component={MapSelectedLocation}/>
<Route component={Notfound}/>
</Switch>
</div>
</Router>
);
The expected result is that coordinates should be determined first then render() should get called. In server-side routing(i.e. using anchor tags instead of <Link>) it works as expected.