為什么會出現“元素類型無效”錯誤？

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

你這里有兩個出口

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;

Answer 2

您的MapContainer有2個導出。

您在頂部export const MapContainer擁有一個

並且您在底部有這個。 export default MapContainer;

現在您需要刪除其中一個，但是保留的一個將決定以后如何導入它。

如果保留默認導出，則可以像這樣導入

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

如果保留非默認導出，則將這樣導入

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