如何使用setState将JSON数据存储在React Native中

Question

我正在尝试更改并将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>

        )
      }
    }

Answer 1

在您的提取调用中，您可以使用以下内容。

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

this.setState({ marker });

如果这不起作用，那么使用qazxsw poi

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 });