最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - undefined is not an object (evaluating 'this.state.markers.map') render - Stack Overflow

programmeradmin4浏览0评论

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 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}
          />
        ))}
发布评论

评论列表(0)

  1. 暂无评论