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

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

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

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';

在 fetch 调用中使用。

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

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

How do I Store JSON data in React Native with setState

json

api

react-native

react-native-maps