2016-11-25 22 views
0

私が作業しているReact Nativeコンポーネント内のReduxストアの2つの部分にアクセスしようとしています。物事を働かせる。React Native/Redux React - Reduxストアにアクセスできない

私は、コンポーネントにプロパティとしてorderIDを渡しているし、私はReduxのストアから適切な注文の詳細を取得したい:orders[orderID]が、ローカル変数を割り当てるしようとすると:

const order = this.props.orders[orderID];

私はエラー:Cannot read property 'orders' of undefined、すなわち:何らかの理由で、Reduxストアのordersの一部がコンポーネントの小道具にconnectを持っていないように見えます。

import React from 'react'; 
import { connect } from 'react-redux'; 
import { 
    View, 
    Text 
} from 'react-native'; 
import Status from '../Status'; 
import Card from './Card'; 
import CardSection from './CardSection'; 

const OrderDetail = ({ orderID }) => { 
    const order = this.props.orders[orderID]; 
    const { 
    id, 
    status, 
    gross_price, 
    currency_symbol, 
    bookings 
    } = order; 

    return (
    <Card> 
     <CardSection> 
     <View style={styles.headerContentStyle}> 
      <View style={styles.bookingIdHeaderContainerStyle}> 
      <Text style={styles.headerTextStyle}>Booking #{id}</Text> 
      </View> 
      <View style={styles.grossPriceHeaderContainerStyle}> 
      <Text style={styles.headerTextStyle}>{currency_symbol}{gross_price}</Text> 
      </View> 
      <View style={styles.statusHeaderContainerStyle}> 
      <Status status={status} /> 
      </View> 
     </View> 
     </CardSection> 
     <CardSection> 
     <View style={styles.orderListContentStyle}> 
      <Text>Booking #1234</Text> 
     </View> 
     </CardSection> 
    </Card> 
); 
}; 

const styles = { 
    headerContentStyle: { 
    flex: 1, 
    flexDirection: 'row', 
    alignItems: 'center' 
    }, 
    headerTextStyle: { 
    fontSize: 18 
    }, 
    bookingIdHeaderContainerStyle: { 
    flex: 5 
    }, 
    grossPriceHeaderContainerStyle: { 
    flex: 2 
    }, 
    statusHeaderContainerStyle: { 
    flex: 2 
    }, 
    orderListContentStyle: { 

    } 
}; 

const mapStateToProps = state => { 
    return ({ 
    orders: state.orders, 
    bookings: state.bookings 
    }); 
}; 

export default connect(mapStateToProps)(OrderDetail); 

任意の提案を次のように

コードはありますか?

答えて

1

OrderDetailはステートレス機能コンポーネントであり、機能コンポーネントにはthisキーワードがありません。

const OrderDetail = (props) => { 
    const order = props.orders[props.orderID]; 
    // ... 
+0

バン上:

が、これはあなたが望んでいるように。私はそれについて知らなかった。毎日何かを学ぶ... ありがとう! –

関連する問題