反应映射错误期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义

Question

我正在研究反应原生地图。我尝试使用 react 来关注 youtube 视频。现在我喜欢使用 react native 来实现它。我遇到了这个错误，“元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。”

我试图查看我的导入是否有任何问题。但是我找不到任何问题请看下面的代码

地图.js

import React, { Component } from 'react';
import { Text,TextInput,View, Image, Button} from 'react-native';
import MapView, { Marker,PROVIDER_GOOGLE } from 'react-native-maps';
import Geocoder from "react-native-geocoding";
import Autocomplete from 'react-native-google-autocomplete';
import AsyncMap from './AsyncMap';


Geocoder.init("API KEY");


export class Map extends Component{

    constructor( props ){
        super( props );
        this.state = {
            address: '',
            city: '',
            area: '',
            state: '',
            mapPosition: {
                lat: this.props.center.lat,
                lng: this.props.center.lng,
        latDelta: 0.0922,
        longDelta: 0.0421,
            },
            markerPosition: {
                lat: this.props.center.lat,
                lng: this.props.center.lng
            }
        }
    }

    componentDidMount() {
        Geocoder.from( this.state.mapPosition.lat , this.state.mapPosition.lng ).then(
            response => {
                const address = response.results[0].formatted_address,
                      addressArray =  response.results[0].address_components,
                      city = this.getCity( addressArray ),
                      area = this.getArea( addressArray ),
                      state = this.getState( addressArray );

            //  console.log( 'city', city, area, state );

                this.setState( {
                    address: ( address ) ? address : '',
                    area: ( area ) ? area : '',
                    city: ( city ) ? city : '',
                    state: ( state ) ? state : '',
                } )
            },
            error => {
            //  console.error( error );
            }
        );
    }

    shouldComponentUpdate( nextProps, nextState ){
        if (
            this.state.markerPosition.lat !== this.props.center.lat ||
            this.state.address !== nextState.address ||
            this.state.city !== nextState.city ||
            this.state.area !== nextState.area ||
            this.state.state !== nextState.state
        ) {
            return true
        } else if ( this.props.center.lat === nextProps.center.lat ){
            return false
        }
    }

    getCity = ( addressArray ) => {
        let city = '';
        for( let i = 0; i < addressArray.length; i++ ) {
            if ( addressArray[ i ].types[0] && 'administrative_area_level_2' === addressArray[ i ].types[0] ) {
                city = addressArray[ i ].long_name;
                return city;
            }
        }
    };

    getArea = ( addressArray ) => {
        let area = '';
        for( let i = 0; i < addressArray.length; i++ ) {
            if ( addressArray[ i ].types[0]  ) {
                for ( let j = 0; j < addressArray[ i ].types.length; j++ ) {
                    if ( 'sublocality_level_1' === addressArray[ i ].types[j] || 'locality' === addressArray[ i ].types[j] ) {
                        area = addressArray[ i ].long_name;
                        return area;
                    }
                }
            }
        }
    };

    getState = ( addressArray ) => {
        let state = '';
        for( let i = 0; i < addressArray.length; i++ ) {
            for( let i = 0; i < addressArray.length; i++ ) {
                if ( addressArray[ i ].types[0] && 'administrative_area_level_1' === addressArray[ i ].types[0] ) {
                    state = addressArray[ i ].long_name;
                    return state;
                }
            }
        }
    };

    onChange = ( event ) => {
        this.setState({ [event.target.name]: event.target.value });
    };

    onInfoWindowClose = ( event ) => {

    };

    onMarkerDragEnd = ( event ) => {
        let newLat = event.latLng.lat(),
            newLng = event.latLng.lng();

        Geocoder.from( newLat , newLng ).then(
            response => {
                const address = response.results[0].formatted_address,
                      addressArray =  response.results[0].address_components,
                      city = this.getCity( addressArray ),
                      area = this.getArea( addressArray ),
                      state = this.getState( addressArray );
                this.setState( {
                    address: ( address ) ? address : '',
                    area: ( area ) ? area : '',
                    city: ( city ) ? city : '',
                    state: ( state ) ? state : '',
                    markerPosition: {
                        lat: newLat,
                        lng: newLng
                    },
                    mapPosition: {
                        lat: newLat,
                        lng: newLng
                    },
                } )
            },
            error => {
            //  console.error(error);
            }
        );
    };


    onPlaceSelected = ( place ) => {
        console.log( 'plc', place );
        const address = place.formatted_address,
              addressArray =  place.address_components,
              city = this.getCity( addressArray ),
              area = this.getArea( addressArray ),
              state = this.getState( addressArray ),
              latValue = place.geometry.location.lat(),
              lngValue = place.geometry.location.lng();
        // Set these values in the state.
        this.setState({
            address: ( address ) ? address : '',
            area: ( area ) ? area : '',
            city: ( city ) ? city : '',
            state: ( state ) ? state : '',
            markerPosition: {
                lat: latValue,
                lng: lngValue
            },
            mapPosition: {
                lat: latValue,
                lng: lngValue
            },
        })
    };



    render(){
    return(
    
      <View>
<View>
  <AsyncMap
      googleMapURL={"https://maps.googleapis.com/maps/api/js?key=API KEY=places"}
      
      />
    
    </View>
    
        
        
             <View>
                < View>
                    <View >
                        <Text>City</Text>
                        <TextInput type="text" name="city"  onChange={ this.onChange }  value={ this.state.city }/>
                    </View>
                    <View >
                        <Text>Area</Text>
                        <TextInput type="text" name="area"  onChange={ this.onChange }  value={ this.state.area }/>
                    </View>
                    <View >
                        <Text>State</Text>
                        <TextInput type="text" name="state"  onChange={ this.onChange }  value={ this.state.state }/>
                    </View>
                    <View>
                        <Text>Address</Text>
                        <TextInput type="text" name="address"  onChange={ this.onChange }  value={ this.state.address }/>
                    </View>
                </ View>


            </View>
      </View>
    )
    
    }
}

AsyncMap.js

import React,{Component} from 'react';
import { Text,View, Image, Button,ScrollView, TouchableOpacity} from 'react-native';
import MapView, {Marker,PROVIDER_GOOGLE } from 'react-native-maps';
import Geocoder from "react-native-geocoding";
import Autocomplete from 'react-native-google-autocomplete';
//import lodash from 'lodash';


class AsyncMap extends Component {

    render() {
        
    return(
                
                    <MapView style={{ flex: 1 }} provider={ PROVIDER_GOOGLE }
                               region={this.state.mapPosition}
                    >
    
                        <MapView.Marker 
                              //  name={'Dolores park'}
                                draggable={true}
                                onDragEnd={ this.onMarkerDragEnd }
                                coordinate={{ lat: this.state.markerPosition.lat, lng: this.state.markerPosition.lng }}
                        >
                        </MapView.Marker>
                        
                        <Autocomplete
                            style={{
                                width: '500',
                                height: '40',
                                paddingLeft: '16',
                                marginTop: '2px',
                                marginBottom: '500'
                            }}
                            onPlaceSelected={ this.onPlaceSelected }
                            types={['(regions)']}
                        />
                    </MapView>
                )   
    }
}

export default AsyncMap;

Home.js

import React,{Component} from 'react';
import { Text,View, Image, Button,ScrollView, Picker, TouchableOpacity,
TouchableWithoutFeedback,Modal} from 'react-native';
import Map from './Map';

class Home extends Component {

    render() {
        return(
            <View >
                <Map
                    center={{lat: 18.5204, lng: 73.8567}}
                    height='300'
                    zoom={15}
                />
            </View>
        );
    }
}

export default Home;

App.js

import React,{Component} from 'react';
import Home from './src/Home';

export default class App extends React.Component {
    render() {
        return (
            <Home />
        );
    }
}

Answer 1

改变这个

export class Map extends Component{

到

export default class Map extends Component{

当您使用默认时，您可以直接导入组件，如下所示

import Map from './Map'

当你不使用默认值时，你可以像多个函数一样有多个导出，但只能有一个默认值

假设你有如下出口

export class Map ...
export class NewMap ...

然后你可以像导入一样

export {Map,NewMap} from './map';