javascript - 为什么我收到 "Element type is invalid"错误？

Question

在我的 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>
    );
}

这是错误:

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

这个在底部。 导出默认MapContainer;

现在您需要删除一个，但您保留的那个将决定您稍后导入它的方式。

如果保留默认导出，则可以像这样导入

从“../../../components/MapContainer/index”导入MapContainer；

如果保留非默认导出，您将像这样导入

从“../../../components/MapContainer/index”导入{MapContainer}；