Object.values函数没有像预期的那样返回JSX

Question

我有像下面这样的购物车数据结构，我想迭代它，但是由于某种原因，它没有像预期的那样正常工作。

我想打印JSX，但是Object.values函数没有返回任何东西。

cart =[
   {
      "PJIM09NH2":{
         "network_id":"VJEC5BU2",
         "id":"PJIM09NH2",
         "quantity":2,
         "size":"",
         "color":"",
         "image":"url-1",
         "name":"Ususus"
      }
   },
   {
      "361MPYLYK":{
         "network_id":"VJEC5BU2KM",
         "id":"361MPYLYK",
         "quantity":2,
         "size":"",
         "color":"",
         "image":"url-3",
         "name":"Lenovo"
      }
   },
   {
      "0OWQRQA4U":{
         "network_id":"VJEC5BU2LM",
         "id":"0OWQRQA4U",
         "quantity":2,
         "size":"",
         "color":"",
         "image":"url-4",
         "name":"Free I phone"
      }
   }
]

我试图像下面的例子那样迭代上面的数据，但是它没有像我想要的那样返回JSX

<View>
  {this.cart.map((cart, index) => {

   Object.values(cart).map((item) => {

   // here alert is working
     alert(JSON.stringify(item.network_id))

   // here this is not returning anything
     return (
          <Text>product {item.network_id}</Text>
     );
   });
  })}
</View>

Answer 1

您不会返回内部map调用的结果。因此，返回一个undefined数组，其中一个反应忽视。而且，您缺少在列表中的每个元素中添加一个唯一的key支柱。

{
  this.cart.map((cart) =>
    Object.values(cart).map((item) => (
      <Text key={item.id}>Product {item.network_id}</Text>
    ))
  )
}

CodeSandbox