为什么我会收到“元素类型无效”错误？

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;