I encountered this error while running my react-native component and need assistance.
An error stating "undefined is not an object (evaluating 'this.state.markers.map')" occurred. This error appears in the following locations:
- c:\projects\myapp\src\components\home\hub.js:87:28
- ...
Here is the relevant code snippet:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import MapView from 'react-native-maps';
export default class Hub extends Component {
constructor(props){
super(props);
this.state = {
region: null,
markers: null,
mapStyle:null
};
}
componentWillMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position);
this.setState({
region: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
},
markers: {
latlng: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
},
title: 'marker test',
description: 'ta ta ra',
},
});
}, (error) => {
console.log(error);
this.setState({
region: {
latitude: 21.035080,
longitude: 105.793627,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
},
markers: {
latlng: {
latitude: 21.035080,
longitude: 105.793627,
},
title: 'marker test',
description: 'ta ta ra',
},
});
},
);
}
onRegionChange = (region) => {
this.setState({ region });
}
render() {
const { region } = this.props;
const { markers } = this.props;
console.log(region);
return (
<View style ={styles.container}>
<MapView
style={styles.map}
region={this.state.region}
onRegionChange={this.onRegionChange}
>
{this.state.markers.map(marker => (
<MapView.Marker
coordinate={marker.latlng}
title={marker.title}
description={marker.description}
/>
))}
</MapView>
</View>
);
}
}