React Native / Redux-无法访问Redux存储

Question

I'm trying to access two parts of my Redux store within a React Native component that I'm working on and for some reason, probably something simple, I can't get things working.

I'm passing the orderID as a property to the component and then I want to retrieve the appropriate order details from the Redux store: orders[orderID] but when trying to assign the local variable:

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

I'm getting the error: Cannot read property 'orders' of undefined , ie: for some reason the orders part of the Redux store appears to not have connect ed to the component props.

Code is as follows:

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

Any suggestions?

Answer 1

OrderDetail is a stateless functional component, and functional components don't have a this keyword.

May be this is what you wanted:

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