React-native maps: Ошибка при попытке установить широту и долготу initialRegion для данных состояния

Question

У меня есть экран, который загружает и размещает маркеры на карте на основе формы поиска на предыдущем экране. Я хочу, чтобы окно карты также центрировалось в центре всех маркеров. Поэтому, когда я использую initialRegion, я устанавливаю широту и долготу для значений состояний, состояния которых устанавливаются после извлечения JSON из URL. 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 успешно меняют состояние на соответствующие координаты.

Answer 1

Вероятно, потому что ваши начальные значения для lat_center и lng_center равны нулю в вашем объекте состояния в конструкторе.

compondentDidMount вызывается после первого рендера.

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

• Конструктор ()
• статический getDerivedStateFromProps ()
• Render ()
• componentDidMount ()

Это означает, что на данный момент значения вашей широты и долготы будут нулевыми, что приведет к этим ошибкам. Вам нужно либо установить начальное значение, которое не является нулевым, либо не отображать вашу карту, пока не будут установлены координаты.

Также эти 4 вызова setState могут быть уменьшены до одного, примерно так.

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