映射对象内的映射对象

Question

我正在尝试在已经映射的数组中映射一个数组

我的目标是显示每个用户拥有的userName 和products。

首先我映射data 数组并显示每个对象的userName。然后我尝试在同一个对象中显示每个产品。

这是我的尝试

{
    this.state.orders.map((item, index) =>{
      return <div key={index}>
        <ListItem button onClick={()=>{this.handleClick('order1')}}>
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText inset primary={item.userName}  secondary={item.order[0].product}/>
          {this.state.order1Open  ? <ExpandLess /> : <ExpandMore />}
           <AddIcon />
         </ListItem>
         <Collapse in={this.state.order1Open} timeout="auto" unmountOnExit>
           <List component="div" disablePadding>
             { item.order.map((products, index) =>{
               {console.log('product',products.product)}
                  <ListItem key={index} button className={classes.nested}>
                    <ListItemIcon>
                      <StarBorder />
                    </ListItemIcon>
                    <ListItemText inset primary={console.log(products.product)} />            
                  </ListItem>
                }  
              )}

结果是显示用户名但产品不显示

当我console.log('product',products.product)}

我的回应就是我的产品

示例：

product product1
product product2
product product3
product product4
product product5

所以这证实了order 对象确实被映射，但没有显示collapse => list => listItem 内的信息。我只是空的

谁能告诉我如何解决这个问题？

数据馈送和对象

{
   "data":[
      {
         "id":1,
         "code":1,
         "userId":1,
         "userName":"Jerome Lebanner",
         "timeStamp":"01:00 07-04-2019",
         "order":[
            {
               "item":"product",
               "price":2.5,
               "qty":3
            },
            {
               "drink":"product",
               "price":5.5,
               "qty":3
            }
         ]
      },
      {
         "id":1,
         "code":2,
         "userId":1,
         "userName":"Claudia Schommels",
         "timeStamp":"01:00 07-04-2019",
         "order":[
            {
               "item":"product",
               "price":2.5,
               "qty":2
            },
            {
               "item":"product",
               "price":5.5,
               "qty":3
            }
         ]
      },
      {
         "id":1,
         "code":3,
         "userId":1,
         "userName":"LadiesChaser87",
         "timeStamp":"01:00 07-04-2019",
         "order":[
            {
               "item":"product",
               "price":4.5,
               "qty":1
            },
            {
               "item":"product",
               "price":5.5,
               "qty":3
            }
         ]
      }
   ]
}

Answer 1

您需要像这样返回 HTML：

{ item.order.map((products, index) =>{
    {console.log('product',products.product)}
    return (<ListItem key={index} button className={classes.nested}>
      <ListItemIcon>
        <StarBorder />
      </ListItemIcon>
      <ListItemText inset primary={console.log(products.product)} />            
    </ListItem>);
  }  
)}