javascript - 错误 : Forgot to export your Listview item component

Question

这是我遇到的错误。

Warning: React.createElement: 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 your code at BookingPage.js:19.

我有一个 Listview 并且项目组件已正确导入。当我从

更改 Listview 项目的导出时

export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard); 

到

export {BookingCard}; 

它正在工作。但我想将 redux 用于 Listview 项目组件。如何正确导出类。这是我的 BookingCard(Listview 项目组件)

    import React from 'react';
    import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
    import { connect } from 'react-redux';
    import {Icon, Button} from 'native-base';
    import {callCancel, setBookingstatus} from '../actions';

    class BookingCard extends React.Component {
      render() {
        return (
          <View style={styles.container}>
                .....
               ......
          </View>
        );
      }
    }

    export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
    // export {BookingCard};

BookingPage(包含Listview的组件)

import React from 'react';
import {ListView, View} from 'react-native';
import { connect } from 'react-redux';
import {Spinner} from './common';
import {BookingCard} from './BookingCard';
import {fetchBooking} from '../actions';

class BookingPage extends React.Component {

    componentWillMount() {
        this.props.fetchBooking();
    }

    ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
    });

    renderRow(booking) {
        return <BookingCard booking={booking} />;
    }

    renderButton() {
        if (this.props.loading) {
            return <Spinner size="large" />;
        } 
            return (
                <ListView
                    dataSource={this.ds.cloneWithRows(this.props.bookings)}
                    enableEmptySections
                    renderRow={this.renderRow}
                />
            );
    }

    render() {
        console.log('onRender BookingPage');
        return (
            <View>
                {this.renderButton()}
            </View>
        );
    }
}

const mapStateToProps = ({ booking }) => {
    const { bookings, loading } = booking;
    return { bookings, loading };
};

export default connect(mapStateToProps, {fetchBooking})(BookingPage);

Answer 1

由于您要像这样默认导出组件:

export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);

下面的行失败了，因为它需要一个命名导出。

import {BookingCard} from './BookingCard';

您应该像这样修复您的导入:

import BookingCard from './BookingCard';

或像这样导出

export const MyConnectedComponent = connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);

您可以在 MDN's website 找到更多信息.