时间戳

首页 > 解决方案 > React-native 地图：当我尝试将 initialRegion 的纬度和经度设置为状态数据时出错

javascript - React-native 地图：当我尝试将 initialRegion 的纬度和经度设置为状态数据时出错

问题描述

我有一个屏幕，可以根据前一个屏幕中的搜索表单在地图上加载和放置标记。我希望地图窗口也能在所有标记的中间居中。因此，当我使用 initialRegion 时，我将纬度和经度设置为状态值，这些状态值是在从 URL 获取 JSON 后设置的。lat 和 long 设置为标记中心的值。我希望地图窗口转到这些坐标，但是当屏幕加载时出现错误。

这是代码：

import React, { Component } from 'react';
import { View, Text, AsyncStorage, Alert, FlatList, StyleSheet } from 'react-native';
import { PrimaryButton } from '../Buttons';
import styles from './styles';
import { ListItem } from '../ListItem';
import MapView, { Marker } from 'react-native-maps';

class RestOptions extends Component {
    constructor() {
        super();
        this.state = {
            jsonResults: [],
            userPlaces: [],
            lat_center: null,
            lng_center: null
        }
    }

    renderItem = ({ item }) => {
        return (
            <View>
                <Text>{item.rest_name}</Text>
                <Text>{item.counter}</Text>
                <Text>Distance: {item.distance} Miles</Text>
                <PrimaryButton
                    label="Set Reservation"
                    onPress={() => this.setReservation(item.rest_id)}
                />
            </View>
        )
    }

    componentDidMount() {
        this.getSearchResults();
    }

    getSearchResults() {
        fetch('fetch url here')
        .then((response) => response.json())
        .then((responseJson) => {
            var placesArray = [];
            var latArray = [];
            var lngArray = [];
            for (key = 0; key < responseJson.rest_array.length; key = key + 1) {
                var lati_str = responseJson.rest_array[key].lat;
                var long_str = responseJson.rest_array[key].lng;
                var count_str = responseJson.rest_array[key].counter;
                var lati = parseFloat(lati_str);
                var long = parseFloat(long_str);
                var count = parseFloat(count_str);
                latArray.push(lati);
                lngArray.push(long);
                placesArray.push ({
                    coordinates: {
                        latitude: lati,
                        longitude: long
                    },
                    id: count
                });
            }
            var max_lat = Math.max.apply(null, latArray);
            var min_lat = Math.min.apply(null, latArray);
            var max_lng = Math.max.apply(null, lngArray);
            var min_lng = Math.min.apply(null, lngArray);
            var latCenter = (max_lat + min_lat) / 2;
            var lngCenter = (max_lng + min_lng) / 2;
            this.setState({lat_center: latCenter}); //setting latitude state here
            this.setState({lng_center: lngCenter}); //setting longitude state here
            this.setState({userPlaces: placesArray});
            this.setState({jsonResults: responseJson.rest_array});
        }).catch((error) => {
            console.error(error);
        });
    }

    setReservation(rest_id) {
        Alert.alert(rest_id);
        //this.props.navigation.navigate('SetReservation');
    }

    render() {
        return (
            <View>
                <View style={mapStyles.mapContainer}>
                    <MapView
                        style={mapStyles.map}
                        initialRegion={{
                            latitude: this.state.lat_center, //using latitude state here
                            longitude: this.state.lng_center, //using longitude state here
                            latitudeDelta: 0.1022,
                            longitudeDelta: 0.0821
                        }}
                    >
                        {this.state.userPlaces.map(userPlace => (
                            <MapView.Marker
                                coordinate={userPlace.coordinates}
                                key={userPlace.id}
                            />
                        ))}
                    </MapView>
                </View>
                <FlatList
                    data={this.state.jsonResults}
                    renderItem={this.renderItem}
                    keyExtractor={(item, index) => index.toString()}
                />
            </View>
        );
    }
};

const mapStyles = StyleSheet.create({
    mapContainer: {
        width: '100%',
        height: 200,
    },
    map: {
        width: '100%',
        height: '100%',
    },
});

export default RestOptions;

我收到此错误：

在此处输入图像描述

这个警告：

在此处输入图像描述

我已经验证了 lat_center 和 lng_center 成功地将状态更改为适当的坐标。

标签： javascriptgoogle-mapsreact-nativemapslatitude-longitude

解决方案

这可能是因为 lat_center 和 lng_center 的初始值在构造函数中的状态对象中为空。

compondentDidMount在初始渲染后被调用。

https://reactjs.org/docs/react-component.html#mounting

  • 构造函数（）
  • 静态 getDerivedStateFromProps()
  • 使成为（）
  • 组件DidMount()

这意味着您的纬度和经度值会暂时为空，从而导致这些错误。您要么需要设置一个不为空的初始值，要么在需要设置坐标之前不渲染地图。

同样，这 4 个 setState 调用可以减少到一个，就像这样。

this.setState({
    lat_center: latCenter, 
    lng_center: lngCenter,
    userPlaces: placesArray,
    jsonResults: responseJson.rest_array
});

推荐阅读