爲什麼我會收到「元素類型無效」錯誤？

Question

在error我進入我的iOS模擬器對我沒有意義。我的Home.js組件對我來說似乎很好。我無法理解我是如何得到這個錯誤的。我清楚地導出了組件。我怎樣才能擺脫這個錯誤？

這裏的Home.js：

import React from 'react'; 
import Container from 'native-base'; 
import {MapContainer} from "../../../components/MapContainer/index"; 

class Home extends React.Component { 

    componentDidMount() { 
     this.props.setName(); 
    } 

    render() { 
     const region = { 
      latitude: 3.146642, 
      longitude: 101.695845, 
      latitudeDelta: 0.8922, 
      longitudeDelta: 0.0421 
     } 
     return(
      <Container> 
       <MapContainer region={region}/> 
      </Container> 
     ); 
    } 
} 

export default Home; 

這裏的index.js：

import React from 'react'; 
import View from 'native-base'; 
import MapView from 'react-native-maps'; 
import styles from './MapContainerStyles'; 

export const MapContainer = ({region}) => { 
    return(
     <View style={styles.container}> 
      <MapView 
       provider={MapView.PROVIDER_GOOGLE} 
       style={styles.map} 
       region={region} 
      > 
      </MapView> 
     </View> 
    ); 
} 

這裏的error：

Element type is invalid: expected a string (for built-in components) or 
a class/function (for composite components) but got: undefined. You 
likely forgot to export your component from the file it's defined in. 

Check the render method of 'Home'. 

Answer 1

您在MapContainer有2個出口商品。

你有這樣一個在頂部export const MapContainer

和你有這樣一個在底部。 export default MapContainer;

現在你需要擺脫一個，但你保留的那個將決定你以後如何導入它。

如果保持默認的導出你再導入像這樣

import MapContainer from "../../../components/MapContainer/index";

如果保留非默認的出口將導入像這樣

import {MapContainer} from "../../../components/MapContainer/index";

Answer 2

你這裏有兩個出口

import React from 'react'; 
import View from 'native-base'; 
import MapView from 'react-native-maps'; 
import styles from './MapContainerStyles'; 

//delete export from the next line 
export const MapContainer = ({region}) => { 
    return(
     <View style={styles.container}> 
      <MapView 
       provider={MapView.PROVIDER_GOOGLE} 
       style={styles.map} 
       region={region} 
      > 
      </MapView> 
     </View> 
    ); 

} 

export default MapContainer;