React Native，TypeError：undefined不是对象

Question

React Native说Undefined不是一个对象，当它明确是一个OBJECt !!我对最近发生的事感到困惑。

查看以下代码。浏览到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是正确的，并且一旦API请求得到解决，就会更好地发出API请求。使用this.setState方法更新state并定义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>;