时间戳

首页 > 解决方案 > React-Native-我将如何根据特定的键值以展开格式打印这个对象数组？

javascript - React-Native-我将如何根据特定的键值以展开格式打印这个对象数组？

问题描述

我目前有一个对象数组，并希望根据主数组中的每个数组以特定格式打印。每个数组基本上代表一个完整的订单，里面的对象是订单项。

Array [
  Array [
    Object {
      "name": "Angela Braun",
      "order_id": 1,
      "price": 39.51,
      "product_id": 2,
      "quantity": 1,
      "size": "S",
      "status": "placed",
      "updated_at": "2019-11-16 13:36:03",
      "user_id": 2,
    },
  ],
  Array [
    Object {
      "name": "Angela Braun",
      "order_id": 2,
      "price": 39.51,
      "product_id": 2,
      "quantity": 1,
      "size": "S",
      "status": "placed",
      "updated_at": "2019-11-16 13:36:03",
      "user_id": 2,
    },
    Object {
      "name": "Fred Schmidt",
      "order_id": 2,
      "price": 12.17,
      "product_id": 1,
      "quantity": 1,
      "size": "S",
      "status": "placed",
      "updated_at": "2019-11-16 13:36:03",
      "user_id": 2,
    },
    Object {
      "name": "Margie Legros",
      "order_id": 2,
      "price": 9.48,
      "product_id": 4,
      "quantity": 1,
      "size": "S",
      "status": "placed",
      "updated_at": "2019-11-16 13:36:03",
      "user_id": 2,
    },
  ],
]

我想要的格式是

Order 1:
Items
Order 2:
Items
Order 3:
Items
etc.

我试过的：

{orders ? 
    orders.map((order, index) => (
      <Text>Order {order[index].order_id}</Text>
      order.map(o => (
        <Text>Name: {o.name} Quantity: {o.quantity}</Text>
      ))
    ))
    : null}

我得到的错误是：

')' expected.ts(1005)

这是指地图。我将如何实现这种布局？

标签： javascriptarraysjsonreactjsreact-native

解决方案

我认为以下内容应该让你理顺。您遇到了以下问题：1）您只需order_id要从 orders 数组的第一个元素中提取，2）您需要有一个React.Fragment嵌套地图的父级，以及 3）您需要{}在嵌套地图周围添加。

{orders && 
  orders.map(order => (
    <React.Fragment>
      <Text>Order {order[0].order_id}</Text>
      {order.map(o => (
        <Text>Name: {o.name} Quantity: {o.quantity}</Text>
      ))}
    </React.Fragment>
  ))
}

推荐阅读