如何解决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>
)
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。