javascript - React-Leaflet 类型错误 : Cannot read property 'lat' of null

Question

我正在制作一张 map ，要求获得用户位置的权限。如果允许该位置，它会找到用户位置，然后将传单 map 的坐标更改为用户的坐标。但是，在编译代码时出现错误

TypeError: Cannot read property 'lat' of null

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import Constants from "expo-constants";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import { render } from 'react-dom';

import 'leaflet/dist/leaflet.css';



export default class App extends React.Component {
  constructor(){
    super();
    this.state = {
      ready: false,
      where: {lat:null, lng:null},
      error: null
    }
  }

  componentDidMount(){
    let geoOptions = {
      enableHighAccuracy: true,
      timeOut: 20000,
      maximumAge: 60 * 60 * 24
    };
    this.setState({ready:false, error: null });
    navigator.geolocation.getCurrentPosition(this.geoSuccess, this.geoFailure, geoOptions);

  }
  geoSuccess = (position) => {
    console.log(position.coords.latitude);

    this.setState({
      ready:true,
      where: {lat: position.coords.latitude, lng:position.coords.longitude}
    })
  }
  geoFailure = (err) => {
    this.setState({error: err.message});
  }
  
  render() {
    return (
      <MapContainer 
      style={{ height: '100%', width: '100%' }}
      center={[this.state.where.lat, this.state.where.lng]} 
      zoom="30" 
      scrollWheelZoom={true}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
    
      </MapContainer>
    );
  }

}

Answer 1

<App>组件将首先挂载，然后再挂载 componentDidMount()将如其名。您收到此错误的原因是当 <App>将首次安装 this.state.where将为空。

要避免此错误，您可以执行以下技巧:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import Constants from "expo-constants";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import { render } from 'react-dom';

import 'leaflet/dist/leaflet.css';



export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            ready: false,
            where: { lat: null, lng: null },
            error: null
        }
    }

    componentDidMount() {
        let geoOptions = {
            enableHighAccuracy: true,
            timeOut: 20000,
            maximumAge: 60 * 60 * 24
        };
        this.setState({ ready: false, error: null });
        navigator.geolocation.getCurrentPosition(this.geoSuccess, this.geoFailure, geoOptions);

    }
    geoSuccess = (position) => {
        console.log(position.coords.latitude);

        this.setState({
            ready: true,
            where: { lat: position.coords.latitude, lng: position.coords.longitude }
        })
    }
    geoFailure = (err) => {
        this.setState({ error: err.message });
    }

    render() {
        return (
            <>
                {( this.state.where.lng != null && this.state.where.lat != null) &&
                    <MapContainer
                        style={{ height: '100%', width: '100%' }}
                        center={[ this.state.where?.lat , this.state.where?.lng]}
                        zoom="30"
                        scrollWheelZoom={true}
                    >
                        <TileLayer
                            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        />

                    </MapContainer>
                }
            </>
        );
    }

}

在上面的代码中MapContainer在你得到 this.state.where 之前不会渲染在该州。

更新

请同时查看之前的代码，我更新了渲染 map 的检查。您还可以检查 lng lat通过 console.log()如果你没有得到它们，那么你可以使用另一个名为 @react-native-community/geolocation 的包这对我有用；

import 'react-native-gesture-handler';
import React, { Component } from 'react';
import {
    SafeAreaView, StyleSheet, ScrollView, View, StatusBar, Dimensions, Image, TouchableOpacity, TextInput, ToastAndroid, ActivityIndicator,
    LogBox, Keyboard, Modal, TouchableHighlight, PermissionsAndroid, ImageBackground, FlatList, AppState, Linking
} from 'react-native';
import Geolocation from '@react-native-community/geolocation'

export class SignUpScreen extends Component {
    constructor() {
        super()
        this.state = {

            longitude: '',
            latitude: '',
            locationAccuracy: '',

        }
    }
    componentDidMount() {
        Geolocation.getCurrentPosition((info) => {
            this.setState({
                longitude: info.coords.longitude,
                latitude: info.coords.latitude,
                locationAccuracy: info.coords.accuracy,
            })
        })
    }
    render() {
        console.log(this.state)
        return (
            <View>
                {this.state.longitude != '' && this.state.latitude != '' &&
                    <>
                        {/* YOUR MAP */}
                    </>
                }
            </View>
        )
    }
}
export default class App extends Component {
    render() {
        return (
            <SignUpScreen />
        );
    }
}