Вывести одну пару значений из объекта JSON - PullRequest
0 голосов
/ 05 мая 2019

Я предвосхищу это, говоря, что я UX Designer, который является новым для React.

Я использую Expo / React-Native и использую функцию «Местоположение» для получения информации о местоположении устройства.Я могу получить информацию обратно в JSON-объект, используя:

const { height, width } = Dimensions.get("window");
class Explore extends Component {
 static navigationOptions = {
header: null
};

state = {
locationResult: ""
};

componentDidMount() {
this._getLocationAsync();
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== "granted") {
      this.setState({
        locationResult: "Permission to access location was denied"
      });
    }

let location = await Location.getCurrentPositionAsync({});
let geocode = await Location.reverseGeocodeAsync(location.coords);
this.setState({ locationResult: JSON.stringify(geocode) });
  };

И в моем рендере я вызываю значение, используя:

    <WelcomeText>
            Discover {this.state.locationResult}
          </WelcomeText>

, который возвращает объект:

[{"street":"Stockton St","city":"San Francisco","region":"CA","country":"United States","postalCode":"94108","isoCountryCode":"US","name":"1 Stockton St"}]

Но как мне просто отобразить значение "City" в объекте?

1 Ответ

2 голосов
/ 05 мая 2019

Попробуйте это:

<WelcomeText>
     Discover {this.state.locationResult[0].city}
</WelcomeText>

Пояснение:

Ваш this.state.locationResult является массивом объектов. С this.state.locationResult[0] мы получаем доступ к первому объекту. Затем мы можем использовать оператор . для доступа к желаемому свойству. В вашем случае .city

Изменить: Вы должны передать геокод без его указания, иначе вы не сможете получить к нему доступ, как я описал выше. reverseGeocodeAsync уже возвращает массив объектов, нет необходимости преобразовывать его в строку.

Заменить:

this.setState({ locationResult: JSON.stringify(geocode) });

с:

this.setState({ locationResult: geocode }); 

Edit2:

Вот рабочий пример: https://snack.expo.io/B1SqSd3iN

...