来自 API 的产品列表

Question

对于我的应用，我正在使用一个包含销售订单历史记录的 API。 返回的数组是这样的，我以一个有 2 个产品的订单为例：

Object {
    "amount": 2671.25,
    "balance": 0,
    "client_id": 1,
    "created_at": "2020-05-06T17:42:26Z",
    "discount": 0,
    "discount_type": 0,
    "id": 19,
    "items": Array [
      Object {
        "cost": 2400,
        "currency": "EUR",
        "description": "blablabla",
        "name": "Apple MacBook Air 15'' LED 500 Go SSD 32 Go",
        "product_id": 5,
        "quantity": 1,
        "tax_rate_id": 1,
      },
      Object {
        "cost": 54.25,
        "currency": "EUR",
        "description": "Blablabla",
        "product_id": 2,
        "quantity": 5,
        "tax_rate_id": 4,
      },
    ],
    "po_number": "",
    "public_notes": "TEST 6 : Acomptes",
    "quote_date": "2020-05-06",
    "quote_number": "D1460019",
    "quote_status": 40,
    "terms": "",
    "updated_at": "2020-05-06T18:08:06Z",
  },

目前在我的屏幕上，我在“标题”中返回订单日期，并在下拉菜单中显示订单总价。它有效，我使用此代码：

<ScrollView>
      {
        this.state.displayArray.map((item, i) => (
        <List.Section title={item.created_at} key={i.toString()}>
          <List.Accordion
            title={item.id}
            left={props => <List.Icon {...props} icon="cart" />}>
            <List.Item title={`${item.amount} €`}/>
          </List.Accordion>     
        </List.Section>
        ))
      }
      </ScrollView>

但是现在，我想让这个屏幕更复杂一点。我想在下拉菜单中添加商品数量和商品名称+价格（批发，有订单详情）

我的问题是我不知道如何从数组中提取产品。如果我这样做了

它不起作用，因为数组中有两个具有两个不同名称的对象...（我试过，它返回'undefined'）

我不知道该怎么做。 我知道我的英语不是很完美，我不知道我的解释是否清楚。基本上在那里，我只有低于我的订单的价格，我会喜欢产品的详细信息及其各自的价格。

---------------- 编辑以添加解决方案 --------------- ----------------

谢谢@HichamELBSI

<ScrollView>
      {
        this.state.displayArray.map((item, i) => (
        <List.Section title={item.created_at} key={i.toString()}>
          <List.Accordion
            title={item.id}
            left={props => <List.Icon {...props} icon="cart" />}>
            <List.Item title={`${item.amount} €`}/>
            {
              item.items.map((product, i) => (
              <List.Item title={product.name} key={i.toString()}/>
              ))
            }
          </List.Accordion>            
        </List.Section>
        ))
      }
</ScrollView>

Answer 1

我认为您可以像为展示所做的那样映射产品。

<ScrollView>
      {
        this.state.displayArray.map((item, i) => (
        <List.Section title={item.created_at} key={i.toString()}>
          <List.Accordion
            title={item.id}
            left={props => <List.Icon {...props} icon="cart" />}>
            <List.Item title={`${item.amount} €`}/>
          </List.Accordion>
          {item.items.map(product => (
             <List.Item title={product.name} />
           )}} 
        </List.Section>
        ))
      }
</ScrollView>

如果您需要，请告诉我