组件无法识别它正在被导出

Posted 2023-03-15

【中文标题】组件无法识别它正在被导出

【英文标题】：Component won't recognize it's being exported

【发布时间】：2017-08-16 14:20:37

【问题描述】：

我遇到了一个非常奇怪的错误。我觉得我已经以正常和常规的方式导出了Home 组件。下面，我发布了我认为相关的.js 文件，以纠正此错误。尽管如此，在我的ios 模拟器中，我仍然收到一条错误消息：

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'.

这里是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 styles from './MapContainerStyles';
import * as MapView from "react-native-maps/lib/components/ProviderConstants";

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


export default MapContainer;

【参考方案1】：

问题不在于您导出的Home。我们知道这是因为 Home 的 render 正在被调用。

从错误来看，Container 或 MapContainer 似乎没有正确导入。我怀疑是Container 是命名导出，所以你需要使用命名导入：

import  Container  from 'native-base';

更新：是的，这是来自NativeBase documentation 的示例：

import Container, Content, Text from 'native-base';

【讨论】：

好的，我做到了。但是现在我遇到了同样的错误，说要检查 MapContainer 而不是 Home.js 的渲染方法。

@hop38：MapContainer 代码中的另一个导入也会出现同样的错误。

嗯，我明白你在说什么。最初，我想像这样导入MapContainer：import MapContainer from './MapContainer'，但它不会让我这样做。现在导入的方式是WebStorm IDE 给我的建议。我感觉这与我遇到的错误有关。

@hop38：嗯，它不会是 MapContainer 导入（就像它不是 Home 导入一样），因为正在调用 MapContainer 的 render（就像Home's 一样）。正如我上面所说，在MapContainer 代码中寻找类似的import 错误in。

我相信这是我导入MapView 的方式。起初，我尝试了import MapView from 'react-native-maps，但后来在WebStorm 中我收到了一个错误，上面写着Default export is not declared in imported module。我在原始帖子中导入 MapView 的方式再次是 WebStorms 建议。