Question

我正在尝试访问我正在使用的React Native组件中的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);

有什么建议吗？

Answer 1

OrderDetail是无状态功能组件，功能组件没有this关键字。

可能这就是你想要的：

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

React Native / Redux - 无法访问Redux商店

1 个答案: