TypeError：null 不是对象（评估'this.state.initialPosition'） - React Native

Question

我正在做一个 RN 项目，使用 Geolocation 来获取当前位置，但我不知道这有什么问题。

这是我的代码：

   import React, { Component } from 'react';
   // Import required component
   import { SafeAreaView, StyleSheet, Text, Alert, TouchableOpacity, Image, View } from 'react-native';
   
   import { request, PERMISSIONS } from 'react-native-permissions';
   
   // Import vector icons
   import Icon from 'react-native-vector-icons/FontAwesome';
   import MapView, { PROVIDER_GOOGLE, Platform, Marker, Callout, Circle } from 'react-native-maps';
   import coordinate from '../../api/binLocationData';
   import Geolocation from '@react-native-community/geolocation';
   
   export class Home extends Component {
     componentDidMount() {
       this.requestLocationPermission();
     }
   
     requestLocationPermission = async () => {
       if (Platform.OS === 'IOS') {
         var response = await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);
         console.log('IOS: ' + response);
         if (response === 'granted') {
           this.locateCurrentPosition();
         }
       } else {
         var response = await request(PERMISSIONS.ANDROID.LOCATION_WHEN_IN_USE);
         console.log('Android: ' + response);
         if (response === 'granted') {
           this.locateCurrentPosition();
         }
       }
     };
   
     locateCurrentPosition = () => {
       Geolocation.getCurrentPosition(
         (position) => {
           console.log(JSON.stringify(position));
   
           let initialPosition = {
             latitude: position.coords.latitude,
             longitude: position.coords.longitude,
             latitudeDelta: 0.05,
             longitudeDelta: 0.05,
           };
           this.setState({ initialPosition });
         },
         (error) => Alert.alert(error.message),
         { enableHighAccuracy: true, timeout: 1000, maximumAge: 1000 },
       );
     };
     render() {
       return (
         <SafeAreaView style={{ flex: 1 }}>
           <View style={{ flex: 1 }}>
             <MapView
               provider={PROVIDER_GOOGLE}
               ref={(map) => (this._map = map)}
               showsUserLocation={true}
               style={styles.maps}
               initialRegion={this.state.initialPosition}
               // initialRegion={{
               //   latitude: 16.0599,
               //   longitude: 108.2438,
               //   latitudeDelta: 0.05,
               //   longitudeDelta: 0.05,
               // }}
             >
               <Circle
                 radius={1000}
                 center={{ latitude: 16.0599, longitude: 108.2438 }}
                 fillColor={'rgba(51,150,152,0.3)'}
               />
               <Marker coordinate={{ latitude: 16.0599, longitude: 108.2438 }}>
                 <Callout>
                   <Text>Bin 1</Text>
                 </Callout>
                 {/* <Image source={require('./src/assets/icons/bin.png')} /> */}
               </Marker>
               {coordinate.map((marker) => (
                 <Marker
                   key={marker.id}
                   coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
                   title={marker.name}
                 />
               ))}
             </MapView>
           </View>
         </SafeAreaView>
       );
     }
   }
   const styles = StyleSheet.create({
     maps: {
       ...StyleSheet.absoluteFillObject,
     },
   });
   
   export default Home;

还有调试显示：

TypeError: null 不是对象（评估 'this.state.initialPosition'）

我该如何解决？

Answer 1

您忘记初始化状态。你应该把它添加到你的类组件中：

constructor(props) {
        this.state = {
          latitude: 0,
          longitude: 0,
          latitudeDelta: 0,
          longitudeDelta: 0,
        };
      }

这应该可行：

import React, { Component } from "react";
// Import required component
import {
  SafeAreaView,
  StyleSheet,
  Text,
  Alert,
  TouchableOpacity,
  Image,
  View,
} from "react-native";

import { request, PERMISSIONS } from "react-native-permissions";

// Import vector icons
import Icon from "react-native-vector-icons/FontAwesome";
import MapView, {
  PROVIDER_GOOGLE,
  Platform,
  Marker,
  Callout,
  Circle,
} from "react-native-maps";
import coordinate from "../../api/binLocationData";
import Geolocation from "@react-native-community/geolocation";

export class Home extends Component {
  constructor(props) {
    this.state = {
      latitude: 0,
      longitude: 0,
      latitudeDelta: 0,
      longitudeDelta: 0,
    };
  }

  componentDidMount() {
    this.requestLocationPermission();
  }

  requestLocationPermission = async () => {
    if (Platform.OS === "IOS") {
      var response = await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);
      console.log("IOS: " + response);
      if (response === "granted") {
        this.locateCurrentPosition();
      }
    } else {
      var response = await request(PERMISSIONS.ANDROID.LOCATION_WHEN_IN_USE);
      console.log("Android: " + response);
      if (response === "granted") {
        this.locateCurrentPosition();
      }
    }
  };

  locateCurrentPosition = () => {
    Geolocation.getCurrentPosition(
      (position) => {
        console.log(JSON.stringify(position));

        let initialPosition = {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          latitudeDelta: 0.05,
          longitudeDelta: 0.05,
        };
        this.setState({
           latitude: initialPosition.latitude,
           longitude: initialPosition.longitude,
           latitudeDelta: initialPosition.latitudeDelta,
           longitudeDelta: initialPosition.longitudeDelta,
         });
      },
      (error) => Alert.alert(error.message),
      { enableHighAccuracy: true, timeout: 1000, maximumAge: 1000 }
    );
  };
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <MapView
            provider={PROVIDER_GOOGLE}
            ref={(map) => (this._map = map)}
            showsUserLocation={true}
            style={styles.maps}
            initialRegion={this.state.initialPosition}
            // initialRegion={{
            //   latitude: 16.0599,
            //   longitude: 108.2438,
            //   latitudeDelta: 0.05,
            //   longitudeDelta: 0.05,
            // }}
          >
            <Circle
              radius={1000}
              center={{ latitude: 16.0599, longitude: 108.2438 }}
              fillColor={"rgba(51,150,152,0.3)"}
            />
            <Marker coordinate={{ latitude: 16.0599, longitude: 108.2438 }}>
              <Callout>
                <Text>Bin 1</Text>
              </Callout>
              {/* <Image source={require('./src/assets/icons/bin.png')} /> */}
            </Marker>
            {coordinate.map((marker) => (
              <Marker
                key={marker.id}
                coordinate={{
                  latitude: marker.latitude,
                  longitude: marker.longitude,
                }}
                title={marker.name}
              />
            ))}
          </MapView>
        </View>
      </SafeAreaView>
    );
  }
}
const styles = StyleSheet.create({
  maps: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default Home;