i got this type of error when i run my react-native ponent, please help me out
undefined is not an object (evaluating 'this.state.markers.map') render undefined is not an object (evaluating 'this.state.markers.map') render c:\projects\myapp\src\ponents\home\hub.js:87:28 c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1045:14 measureLifeCyclePerf c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:85:11 _renderValidatedComponentWithoutOwnerOrContext c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1045:8 _renderValidatedComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1075:10 performInitialMount c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:484:24 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:346:40 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6 performInitialMount c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:496:6 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:346:40 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6 mountChildren c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:264:10 initializeChildren c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:74:41 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:212:6 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6 performInitialMount c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:496:6 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:346:40 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6 mountChildren c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:264:10 initializeChildren c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:74:41 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\native\
this is my code:
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
};
}
ponentWillMount() {
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>
);
}
}
i got this type of error when i run my react-native ponent, please help me out
undefined is not an object (evaluating 'this.state.markers.map') render undefined is not an object (evaluating 'this.state.markers.map') render c:\projects\myapp\src\ponents\home\hub.js:87:28 c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1045:14 measureLifeCyclePerf c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:85:11 _renderValidatedComponentWithoutOwnerOrContext c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1045:8 _renderValidatedComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1075:10 performInitialMount c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:484:24 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:346:40 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6 performInitialMount c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:496:6 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:346:40 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6 mountChildren c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:264:10 initializeChildren c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:74:41 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:212:6 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6 performInitialMount c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:496:6 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:346:40 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6 mountChildren c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:264:10 initializeChildren c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:74:41 mountComponent c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\native\
this is my code:
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
};
}
ponentWillMount() {
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>
);
}
}
Share
Improve this question
asked Mar 26, 2017 at 15:52
Mikes NguyenMikes Nguyen
211 gold badge1 silver badge5 bronze badges
2
-
Have you tried debugging your code? The error states clearly that there is
undefined
along the dereferencing paththis.state.markers.map
you need to identify the place where theundefined
is located, i.e.this
,state
,markers
ormap
and figure out why did it got there. But consider this. Your question is poorly posed, please invest more time and efforts in your question, as more you do so, the better answers you will get. – Lu4 Commented Mar 26, 2017 at 16:00 - yes, i have tried! thank you for your advice, i will keep it in mind. – Mikes Nguyen Commented Mar 28, 2017 at 7:06
2 Answers
Reset to default 4- Initialize state with
markers = [];
not withnull
. then set them as array (in
ponentDidMount
or inuseEffect
if you are using hooks):markers:
[{ latlng: { latitude: 21.035080, longitude: 105.793627, }, title: 'marker test', description: 'ta ta ra', }],
not as a single object, so you can display them using the
map
function.
After modifications/debugging, if your code still doesn't work, take a look at this fully functional example using multiple markers:
https://github./airbnb/react-native-maps/blob/master/example/examples/DefaultMarkers.js
Your marker is an object and changes it into an Array so that in the initial state make it as Array, not null (map is for Array).
If you want to set null in the initial state change the code like this,
{this.state.markers && this.state.markers.map(marker => (
<MapView.Marker
coordinate={marker.latlng}
title={marker.title}
description={marker.description}
/>
))}