React Native, TypeError: undefined не является объектом Когда это

React Native говорит, что Undefined не является объектом, когда он ЯВНО ЯВЛЯЕТСЯ ОБЪЕКТОМ !! Я не понимаю, что происходит.

Посмотрите на следующий код. Перейдите к функции render(). См. Следующее ... console.info(cords.coords);

console.info(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.info(cords.coords.coords.latitude), чтобы получить широту. но он говорит, что это не определено. Он говорит, что он не определен, даже если я сделаю console.info(cords.coords.coords)? Что я делаю неправильно ?

Обратите внимание: console.info(cords.coords); - это то место, где в сценарии запускается ошибка.

Имейте в виду, что следующий код действительно работает. только когда я меняю console.info(cords.coords); на console.info(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.info("Get Geo Synce");
    this._getLocationAsync();
  }

  _getLocationAsync = async () => {
    console.info("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.info("Loading Location 1");
    let location = await Expo.Location.getCurrentPositionAsync({ enableHighAccuracy: true });
    console.info("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.info(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%',
  },
});

Это строка, где ошибка: latitude: coords.latitude? Разве это не относится к широте координат, а не к широте cords.coords?

Yossi 30.03.2018 14:58
console.info(cords.coords); - это то место, где возникает ошибка. `latitude: coords.latitude` отлично работает, потому что если вы посмотрите под функцией` render () `. Я беру это значение из let coords = params ? params.coords.coords : null;. Я создал переменную cords, чтобы в конечном итоге ее заменить.
numerical25 30.03.2018 15:21

Исправление Если я заменяю console.info(cords.coords); на console.info(cords.coords.latitude);, возникает ошибка

numerical25 30.03.2018 15:32

вы имеете в виду coords.coords? Вы приклеили cords.coords. также let cords = this.state всегда должен выходить из строя, поскольку вы выполняете setState ({coords}), а не setState ({cords})

Mukesh Soni 30.03.2018 15:39

Это не сработает, потому что я помещаю объект состояния в cords. поэтому, чтобы получить coords, мне нужно сделать cords.coords, и он действительно работает. только когда я делаю cords.coords.coords.latitude, он выходит из строя. ознакомьтесь со структурой моего объекта в посте. данные терминала.

numerical25 30.03.2018 15:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
5
8 506
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Запросы API лучше делать после того, как компонент монтируется в методе жизненного цикла componentDidMount, и проблема с вашим кодом заключается в том, что при первоначальном рендеринге this.state.coords не определено правильно, и после разрешения запроса API this.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>;

Это очень хорошо знать, но не здесь возникает ошибка. Я добавил в своем сообщении, где возникает ошибка. console.info(cords.coords); - это то место, где возникает ошибка. Представление на данный момент действительно работает нормально, потому что данные извлекаются из let coords = params ? params.coords.coords : null;.

numerical25 30.03.2018 15:27

обратите внимание, если я заменяю console.info(cords.coords); на console.info(cords.coords.latitude);, возникает ошибка. Прямо сейчас приведенный выше код работает нормально, пока я не добавлю console.info(cords.coords.latitude);.

numerical25 30.03.2018 15:29

сейчас console.info(cords.coords); работает нормально, только когда я меняю его на console.info(cords.coords.latitude);, он ломается. Я обновил пост. Благодарность

numerical25 30.03.2018 15:34

исправление. только когда я делаю console.info(cords.coords.coords.latitude); или console.info(cords.coords.coords);, он терпит неудачу. ознакомьтесь со структурой объекта в посте

numerical25 30.03.2018 15:54

при начальной загрузке this.state.cords не определено, вызывается функция рендеринга, и, поскольку this.state.cords.coords не определен, может возникнуть ошибка.

Raj Kumar N 30.03.2018 16:23

Эта ошибка может возникнуть во время первоначального вызова render ()

Raj Kumar N 30.03.2018 16:32

Я понял проблему, но экземпляр this.state.coords очень помог мне с решением. Благодарю. И я только сейчас понимаю, что функция рендеринга постоянно обновляется, что имеет смысл, почему я должен сначала использовать экземпляр объекта.

numerical25 30.03.2018 17:07

Другие вопросы по теме