React Native，TypeError:未定义的不是对象

Question

反应本机说，当它显然是对象时，不确定的不是对象！我对发生的事情感到困惑。

查看以下代码。浏览到render()功能。请参阅以下... console.log(cords.coords);

console.log(cords.coords);输出以下...

08:37:22: Object {
08:37:22:   "coords": Object {
08:37:22:     "accuracy": 5,
08:37:22:     "altitude": 0,
08:37:22:     "altitudeAccuracy": -1,
08:37:22:     "heading": -1,
08:37:22:     "latitude": 39.946313,
08:37:22:     "longitude": -82.810829,
08:37:22:     "speed": -1,
08:37:22:   },
08:37:22:   "timestamp": 1522413346644.865,
08:37:22: }

一个人会说要检索这些数据，您必须执行以下操作。console.log(cords.coords.coords.latitude)获得纬度。但是它说它不确定。它说即使我做console.log(cords.coords.coords)，它也没有定义？我在做什么错？

注意console.log(cords.coords);是脚本中触发错误的地方

请记住，以下代码确实有效。只有当我将console.log(cords.coords);更改为console.log(cords.coords.coords.latitude);时，它会破坏

import React, { Component } from 'react';
import {Platform, StyleSheet, Dimensions, Text, View } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import { Constants, Location, Permissions } from 'expo';
export default class MapScreen extends Component<Props> {
 constructor(props) {
    super(props);
    this.state = {
      markers: [{
        title: 'hello',
        coordinates: {
          latitude: 39.946313,
          longitude: -82.810829
        },
      },
      {
        title: 'hello',
        coordinates: {
          latitude: 39.945838,
          longitude: -82.813018
        },  
      }
     ]
    }
    console.log("Get Geo Synce");
    this._getLocationAsync();
  }
  _getLocationAsync = async () => {
    console.log("load geo sync");
    //Location.setApiKey("AIzaSyBY45685CkDPy5a4ss29IL2ZjIvTvYTMyk");
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        locationResult: 'Permission to access location was denied',
      });
    }
    console.log("Loading Location 1");
    let location = await Expo.Location.getCurrentPositionAsync({ enableHighAccuracy: true });
    console.log("Retrieved Location");
    this.setState({ coords: location });
  };
  
  render() {
    const { params } = this.props.navigation.state;
    let coords = params ? params.coords.coords : null;
    let cords = this.state;
    console.log(cords.coords);
    //let coords = state.locationResult.coords;
    return (
          <View style={{flex: 1}}>
            <MapView
                style={ styles.container }
                initialRegion={{
                    latitude:coords.latitude,
                    longitude:coords.longitude,
                    latitudeDelta:0.0992,
                    longitudeDelta:0.0421,
                }}
            >
              {this.state.markers.map(marker => (
                <MapView.Marker 
                  coordinate={marker.coordinates}
                  title={marker.title}
                />
              ))}
            </MapView>
          </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
      width:'100%',
      height:'100%',
  },
});

Answer 1

最好在组件安装在componentdidmount生命周期方法中，而代码的问题是，初始渲染this.state.coords.coords是未定义的，一旦API请求，则进行了问题。解决此问题。STATE通过this.setState方法进行更新，并定义了this.state.coords。因此，为了使它工作，请尝试一下，

 return this.state.coords instanceof Object ? (
      <View style={{flex: 1}}>
        <MapView
            style={ styles.container }
            initialRegion={{
                latitude:coords.latitude,
                longitude:coords.longitude,
                latitudeDelta:0.0992,
                longitudeDelta:0.0421,
            }}
        >
          {this.state.markers.map(marker => (
            <MapView.Marker 
              coordinate={marker.coordinates}
              title={marker.title}
            />
          ))}
        </MapView>
      </View>
) : <Text>Fetching, Please wait....</Text>;