Как сохранить данные JSON в React Native с помощью setState - PullRequest
Новая
       12

Как сохранить данные JSON в React Native с помощью setState

0 голосов
/ 05 сентября 2018

Я пытаюсь изменить и сохранить результаты широты и долготы с http://api.postcodes.io/postcodes/NW10AP в моем состоянии Marker.coordinate, чтобы моя карта могла отобразить новый маркер.

Действительно изо всех сил пытается выяснить, как это можно сделать, и очень признателен за любую помощь! :)

Пожалуйста, посмотрите на код ниже 

    import React from 'react';
    import { MapView } from 'expo';
    import { Marker } from 'react-native-maps';
    import {Image, ActivityIndicator, View, Text, FlatList} from 'react-native';



    export default class App extends React.Component {

      state = {
        region: {
          latitude: 51.5074,
          longitude: 0.1278,
          latitudeDelta: 0.1,
          longitudeDelta: 0.1
        },
        marker: {
            title: 'Hello there',
            coordinate: {latitude: 51.5074, longitude: 0.1278}
            }
        }



      onRegionChange = (region) => {
        this.setState({region});
        // console.log(region)
      }

           componentDidMount(){
        return fetch('http://api.postcodes.io/postcodes/sw151pf')
          .then((response) => response.json())
          .then((responseJson) => {
            let marker = {...this.state.marker}
            marker.coordinate.latitude = responseJson.result.latitude;
            marker.coordinate.longitude = responseJson.result.longitude;


            this.setState({
              marker
            }, function(){

            });

          })
          .catch((error) =>{
            console.error(error);
          });
      }




      render() {

        return (

          <MapView
            style={{ flex: 1 }}
            region={this.state.region}
            onRegionChange={this.onRegionChange}

          >

            <Marker
              coordinate={this.state.marker.coordinate}
              title={this.state.marker.title}
            />

          </MapView>

        )
      }
    }

1 Ответ

0 голосов
/ 05 сентября 2018

В вызове вы можете использовать следующее. 

let marker = Object.assign({},this.state.marker)
marker.coordinate.latitude = responseJson.result.latitude;
marker.coordinate.longitude = responseJson.result.longitude;

this.setState({ marker });

Если это не работает, используйте immutability-helper

https://github.com/kolodny/immutability-helper/blob/master/README.md

Ваш код должен выглядеть следующим образом: 

import update from 'immutability-helper';

при использовании вызова вызова. 

const newMarker = update(this.state.marker,{
  coordinate: {
    latitude: {$set:responseJson.result.latitude},
    longitude: {$set: responseJson.result.longitude}
  }
})

this.setState({ marker:newMarker });

полный код: 

componentDidMount() {
    return fetch('http://api.postcodes.io/postcodes/sw151pf')
      .then((response) => response.json())
      .then((responseJson) => {

        const newMarker = update(this.state.marker,{
          coordinate: {
            latitude: {$set:responseJson.result.latitude},
            longitude: {$set: responseJson.result.longitude}
          }
        })
        this.setState({ marker:newMarker });

      })
      .catch((error) => {
        console.error(error);
      });
  }
...