如何渲染当前订单的地图？

Question

我正在学习 react-native 课程，并成功地进行了许多自定义更改以改进我正在使用的应用程序。我遇到了一个问题，我无法打印给定订单中的所有商品。这是我的订单模型：

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;

在我的 orderReducer 中，我有这个代码：

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 中，我设法打印了日期、订单 ID 和总金额，但我可以生成带有地图的项目数组，我认为我正在错误地编写地图函数。

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;

这是我在将 orderId 与订单匹配时获得的信息的 console.log：

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

我通过在 map 函数中添加一个 key= 值解决了这个问题。成功了

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