Question

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

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;

Answer 1

问题可能出在从FlatList导入react-native（注意大写字母“ L”）。

React Native声称我没有正确导入/导出

1 个答案: