admin管理员组

文章数量:1321044

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>
);
}
}
  • javascript
  • google-maps
  • react-native
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 path this.state.markers.map you need to identify the place where the undefined is located, i.e. this, state, markers or map 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
Add a ment  | 

2 Answers 2

Reset to default 4
  • Initialize state with markers = []; not with null. then

  • set them as array (in ponentDidMount or in useEffect 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}
          />
        ))}

本文标签： javascriptundefined is not an object (evaluating 39thisstatemarkersmap39) renderStack Overflow

版权声明：本文标题：javascript - undefined is not an object (evaluating &#39;this.state.markers.map&#39;) render - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742094016a2420435.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。