Блог

Я пытаюсь выполнить вызов fetch API в React Native:

 import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    TextInput,
    TouchableHighlight,
    View
} from 'react-native';

class AwesomeProject extends Component {
    render() {
        return (    
            <View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
            <TextInput 
                placeholder="Enter Text to Be Validated"
                style={{height: 65, width: 275, fontSize: 22}} 
                onSubmitEditing={(event) => {
                    var apiKey = "someAPIKey"
                    var encodedAddress = encodeURIComponent(event.nativeEvent.text)
                    fetch("https://maps.googleapis.com/maps/api/geocode/json?address="   encodedAddress   "amp;key="   apiKey)
                        .then(response => response.json())
                        .then(json => {
                            if (json.status === "OK") {
                                console.log(json.results.formatted_address)
                            }
                            else {
                                console.log("Invalid")
                            }
                    })
                        .catch(err => console.err(err))
                }}
               />   
          </View>
    );
}
  

Однако обратный вызов, зарегистрированный в onSubmitEditing, работает только при тестировании вне React-Native. Кто-нибудь знает объяснение??

Спасибо!!

Попробуйте

if (json.status === "OK") {
console.log(json.results[0].formatted_address)
}

Я немного покопался и увидел, что возвращаемый JSON имеет свойство status и массив результатов. Вы можете получить доступ к первому элементу в этом массиве результатов с results[0] помощью .