錯誤：忘了導出列表視圖項組件

警告：React.createElement：類型無效 - 預期字符串（用於內置組件）或類/功能（複合組件），但得到：不確定。你可能忘了你的組件從它的定義的文件導出檢查你的代碼在 BookingPage.js：19。

我有一個ListView和項目組件正確導入。當我改變了ListView項的出口從

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

到

export {BookingCard};

它的工作。但我想爲Listview項目組件使用redux。如何正確導出類。這是我的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（組件包括列表視圖）

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);

來源

2017-08-31 Anjal Saneen

你能告訴你，當它連接你如何導入項列表組件 – eden

它可能是因爲你出口的默認。 – eden

含進口也增加@Eden類。你能幫我嗎？即時通訊本身就是非常初學者。 –

既然要導出您的組件默認這樣的：

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

的因爲它需要一個名爲export以下線路出現故障。

import {BookingCard} from './BookingCard';

您應該解決您的導入是這樣的：

import BookingCard from './BookingCard';

或導出它像

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

您可以在更MDN's website找出來。

來源

2017-08-31 08:54:55 eden

錯誤：忘了導出列表視圖項組件

回答

相關問題