React Typescript：api 数据到数组映射

问题描述

我有来自 api 的这个数组数据，我想使用 map 函数在 react tsx 文件中制作它

{
   "data":{
      "cart":{
         "1":{
            "product_id":1,"name":"Product 1","quantity":1,"price":"1.00"
         },"2":{
            "product_id":2,"name":"Product 2","price":"1.00"
         }
      }
   }
}

React Typescript 代码（但不起作用）：

(data.cart.map((item:any,key:any) => (
   <p>{item.product_id}</p>
   <p>{item.name}</p>
   <p>{item.quantity}</p>
   <p>{item.price}</p>
)))

我想修复 react tsx 代码

解决方法

数据嵌套在购物车内的对象内。您可以使用 Object.Keys 访问键，如 1、2、3 ...

Object.keys(data.cart[0]).map((key) => {
let item = data.cart[0][key];
return (
<React.Fragment key={key}>
   <p>{item.product_id}</p>
   <p>{item.name}</p>
   <p>{item.quantity}</p>
   <p>{item.price}</p>
</React.Fragment>
)
});

基于修改后的问题，因为您删除了数组：

Object.keys(data.cart).map((key) => {
let item = data.cart[key];
return (
<React.Fragment key={key}>
   <p>{item.product_id}</p>
   <p>{item.name}</p>
   <p>{item.quantity}</p>
   <p>{item.price}</p>
</React.Fragment>
)
});