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

Question

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

代码如下：

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 成功地将状态更改为适当的坐标。

Answer 1

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

compondentDidMount 在初始渲染后被调用。

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

constructor()

static getDerivedStateFromProps()

render()

componentDidMount()

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

也可以将这 4 个 setState 调用减少为一个，就像这样。

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

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

React-native maps: Error when I try to set latitude and longitude of initialRegion to state data

javascript

maps

google-maps

latitude-longitude

react-native