Как я могу отобразить карту моего текущего заказа?

Question

Я прохожу курс по реагированию на родные и успешно внес много пользовательских изменений, чтобы улучшить приложения, с которыми я работаю. Я столкнулся с проблемой, когда я не могу распечатать все элементы из данного заказа. Это моя модель заказа:

class Order {
  constructor(id, items, totalAmount, date) {
    this.id = id;
    this.items = items;
    this.totalAmount = totalAmount;
    this.date = date;
  }

  get readableDate() {
    return moment(this.date).format('MMMM Do YYYY, hh:mm');
  }

};

export default Order;

В моем заказе Reducer, у меня есть этот код:

import { ADD_ORDER } from '../../store/actions/orders';
import Order from '../../models/order';

const initialState = {
  orders: []
}

export default (state = initialState, action) => {
  const randomNumber = Math.floor(Math.random() * 10000) + 1;

  switch (action.type) {
    case ADD_ORDER:
      console.log();
      const newOrder = new Order (
        randomNumber.toString(),
        action.orderData.items,
        action.orderData.amount,
        new Date()
      );
      return {
        ...state,
        orders: state.orders.concat(newOrder)
      }
  }
  return state;
};

, если это полезно, действия:

export const ADD_ORDER = 'ADD_ORDER';

export const addOrder = (cartItems, totalAmount) => {
  return {
    type: ADD_ORDER,
    orderData: { items: cartItems, amount: totalAmount }
  };
};

На экране OrdersScreen. js Я перечисляю все заказы, которые я генерирую в своем приложении. Когда я нажимаю один заказ, я хочу открыть новый экран OrderScreen. js Мне удалось сделать это успешно:

// STORE
import * as orderActions from '../../store/actions/orders';
import cart from '../../store/reducers/cart';

const OrdersScreen = props => {
  const orders = useSelector(state => state.orders.orders);

  return (
    <View style={styles.screen}>
      <SubHeader title="Your current orders" style={styles.subHeader} />
      <FlatList 
        data={orders}
        renderItem={itemData => 
        <SingleLineWithCaption
          caption={itemData.item.totalAmount}
          title={itemData.item.readableDate}
          items={itemData.item.items}
          onPress={() => {
            // console.log(itemData),
            props.navigation.navigate('Order', { id: itemData.item.id, date: itemData.item.date })
          }}
        />}
      />
    </View>    
  );
};

OrdersScreen.navigationOptions = navData => {
  return {
      headerTitle: 'My orders',
      headerLeft: () => (
        <HeaderButtons HeaderButtonComponent={HeaderButton}>
          <Item 
            title='Menu'
            iconName='menu'
            onPress={() => {
              navData.navigation.toggleDrawer()
              }}
          />
        </HeaderButtons>
      ),
  }
};

const styles = StyleSheet.create({
  screen: {
      flex: 1,
      backgroundColor: Colors.background
  },
  subHeader: {
    color: Colors.OnBackgroundUnfocused
  }
});


export default OrdersScreen;

Теперь в моем OrderScreen мне удалось напечатать дату, идентификатор заказа и totalAmount, но я могу сгенерировать массив элементов рендеринга с картой, думаю, я пишу ошибочно функцию карты.

const OrderScreen = props => {
  const orderId = props.navigation.getParam('id');
  // define el producto que se tiene que pintar en esta pantalla

  const selectedOrder = useSelector(state => 
      state.orders.orders.find(order => order.id === orderId)
  );


  const cartItems = useSelector(state => state.orders.orders.items);

  console.log(cartItems.productId);

  return (
    <View style={styles.screen}>
      <View style={{paddingBottom: 16, borderWidth: 1, borderColor: Colors.secondary}}>
        <View style={{paddingBottom: 16, borderWidth: 1, borderColor: Colors.primary}}>
          <SingleLineWithCaption title="Date" caption={selectedOrder.date.toString()} />
          <SingleLineWithCaption title="Total amount" caption={selectedOrder.totalAmount + '€'} />
          <SubHeader title="Info" style={styles.subtitle} />
        </View>
        <View style={{paddingBottom: 16, borderWidth: 1, borderColor: Colors.error}}>
          <SubHeader title="Purchased items" style={styles.subtitle} />
          {
            selectedOrder.items.map(orderItem => <Text>{orderItem.productTitle}</Text>)
          }
        </View>
      </View>
    </View>
  );
};

OrderScreen.navigationOptions = navData => {
  const orderId = navData.navigation.getParam('id');
  return {
      headerTitle: 'Order #' + orderId
  }
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: Colors.background
  },
  subtitle: {
    color: Colors.OnBackgroundUnfocused
  }
});

export default OrderScreen;

Это console.log информации, которую я получаю, когда сопоставляю orderId с ордерами:

Order {
  "date": 2020-05-03T19:54:01.454Z,
  "id": "5541",
  "items": Array [
    Object {
      "productId": "p1",
      "productPrice": 29.99,
      "productTitle": "Red Shirt",
      "quantity": 2,
      "sum": 59.98,
    },
  ],
  "totalAmount": 59.98,
}

Answer 1

Я решил это, добавив ключ = значение в функцию карты. Сработало

selectedOrder.items.map(orderItem => <SingleLineWithCaption key={orderItem.id} title={orderItem.productTitle} />)