道具'coordinate.longitude'在'MapMarker'中被标记为必需，但它的值是未定义的

Question

当我在做我的毕业设计时，我遇到了 expo/react 原生 mapView 的一些问题，它给了我这个错误，所以请任何人尽快帮助我。

如果你想检查，这是我的代码：

import React, { Component } from "react";
import { View, I18nManager, StyleSheet, } from 'react-native';
import MapView, { Marker } from 'react-native-maps';



I18nManager.allowRTL(false);
export default class MyMapView extends Component {

    //default state
    constructor(props) {
        super(props);

        
        
    }
    

    render() {
      
        return (
            <View style={styles.container}>
              <MapView
                    style={styles.map}
                    region={{
                        //we have muliple locations so we pass them here
                        latitude: this.props.latitude,longitude: this.props.longitude,
                        latitudeDelta:this.props.latitudeDelta ,
                        longitudeDelta: this.props.longitudeDelta, 
                    }} 
                >

                    <Marker coordinate={{   latitude: this.props.latitude,longitude: this.props.longitude}} />
                </MapView>
            </View>
        );


    }
}
const styles = StyleSheet.create({
    container: {
        ...StyleSheet.absoluteFillObject
    },
    map: {
        ...StyleSheet.absoluteFillObject
    }
});

Answer 1

我认为您应该添加一个条件以确保您的道具不为空。 试试这样的：

export default class MyMapView extends Component {

...     

    render() {
      
        return (
           { this.props && <View style={styles.container}>
              <MapView
                    style={styles.map}
                    region={{
                        //we have muliple locations so we pass them here
                        latitude: this.props.latitude,longitude: this.props.longitude,
                        latitudeDelta:this.props.latitudeDelta ,
                        longitudeDelta: this.props.longitudeDelta, 
                    }} 
                >

                    <Marker coordinate={{   latitude: this.props.latitude,longitude: this.props.longitude}} />
                </MapView>
            </View>
  }
           );


    }
}