首页 > 解决方案 > React Native 声称我没有正确导入/导出

问题描述

我不明白为什么会收到以下错误消息,因为我相信我已经正确使用了默认导出和导入:

Invariant Violation: 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, or you might have mixed up default and named imports.

我有两个组件类:Main 和 Menu。

在 MainComponent.js 中:

import React, { Component } from 'react';
import Menu from './MenuComponent';
import { DISHES } from '../shared/dishes';

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dishes: DISHES
        }
    }

    render() {
        return(
            <Menu dishes={this.state.dishes} />
        );
    }
}

export default Main;

在 MenuComponent.js 中:

import React, {Component} from 'react';
import {View, Flatlist} from 'react-native';
import { ListItem } from 'react-native-elements';

function Menu(props) {
    const renderMenuItem = ({item, index}) => {
        return(
            <ListItem
                key={index}
                title={item.name}
                subtitle={item.description}
                hideCheveron={true}
                leftAvatar={{source: require('./images/uthappizza.png')}}
            />
        );
    }

    return(
        <Flatlist
            data={props.dishes}
            renderItem={renderMenuItem}
            keyExtractor={item => item.id.toString()}
        />
    );
} 
export default Menu;

标签: react-native

解决方案


The issue might be with the import of FlatList from react-native (note the capital "L").


推荐阅读