reactjs - 将打字稿哈希图标题作为键和值反应在里面
问题描述
我试图显示属于一个元素的多个项目,即属于键的值。在这种情况下,关键是标题
电子产品
产品1
产品2
产品3
家电
产品4
产品5
产品6
所以我有一个带有元素数组的类型,其中一个元素是标题,而其他元素显示在
enum ProductCatagory {
Electronics = "Electronics" ,
HomeAppliance = "HomeAppliance"
}
export type Product= {
pId: number,
productName: string
}
type MyHashMap= {
[id: string] : items[]
}
function ProductClass() {
const myHash: MyHashMap= {}
const obj: Product= {
"0": { "pId": 0, "productName": "prod1", "catagory": "Home Appliance" },
"1": { "pId": 1, "productName": "prod2", "catagory": "Home Appliance" },
"2": { "pId": 2, "productName": "prod3", "catagory": "Home Appliance" }
"3": { "pId": 3, "productName": "prod1", "catagory": "Electronics" },
"4": { "pId": 4, "productName": "prod2", "catagory": "Electronics" },
"5": { "pId": 5, "productName": "prod3", "catagory": "Electronics" }
};
obj.map(s => {
if (!myHash[s.catagory]) {
myHash[s.catagory] = []
}
myHash[s.catagory].push(s)
})
const electronics= obj[ProductCatagory.Electronics].map(e => { return e} );
const homeAppliance= obj[ProductCatagory.HomeAppliance].map(h => { return h} );
const differentiator = (electronics||homeAppliance) : (electronics|| homeAppliance)
return (
{<h1>{titlehere}</h1>
<ul>
{
differentiator.map((prod, key) => {
return (
<h1 key={key}>{prod}</h1>
)
})
}
</ul>
)
}
到目前为止我尝试过的是使用 switch 语句,但我只是不知道如何只打印标题中的键和下面的产品。但我需要帮助,或者任何指针都会有所帮助。
解决方案
我想出来给任何有兴趣的人。
https://reactjs.org/docs/lists-and-keys.html
所以答案是
enum ProductCatagory {
Electronics = "Electronics" ,
HomeAppliance = "HomeAppliance"
}
export type Product= {
pId: number,
productName: string
}
type MyHashMap= {
[id: string] : items[]
}
function ProductClass() {
const myHash: MyHashMap= {}
const obj: Product= {
"0": { "pId": 0, "productName": "prod1", "catagory": "Home Appliance" },
"1": { "pId": 1, "productName": "prod2", "catagory": "Home Appliance" },
"2": { "pId": 2, "productName": "prod3", "catagory": "Home Appliance" }
"3": { "pId": 3, "productName": "prod1", "catagory": "Electronics" },
"4": { "pId": 4, "productName": "prod2", "catagory": "Electronics" },
"5": { "pId": 5, "productName": "prod3", "catagory": "Electronics" }
};
obj.map(s => {
if (!myHash[s.catagory]) {
myHash[s.catagory] = []
}
myHash[s.catagory].push(s)
})
const electronics= obj[ProductCatagory.Electronics].map(e => { return e} );
const homeAppliance= obj[ProductCatagory.HomeAppliance].map(h => { return h} );
const differentiator = (electronics||homeAppliance) : (electronics|| homeAppliance)
const renderProducts= Object.entries(myHash).map(([catagory, productName], key) => {
return (
<divkey={key}>
<h3>{catagory}</h3>
<p>{productName.map(p => {return p.productName})}</p>
</div>
)
})
return (
<>
{renderProducts}
</>
);
}
推荐阅读
- python - 在python中的for循环和条件语句中使用'self'
- java - 将不一致的文件读取到arraylist java
- bash - 如何避免在 Makefile 中运行 bash 命令时找不到命令?
- javascript - 如何使用来自另一个组件的数据更改一个组件中的变量值
- linux - 无法在 linux 中读取 fodler /var/www,在 docker 中使用 phpmyadmin
- android - Android:如何从单个按钮到多个片段的导航器进行交易?
- flutter - 带有滚动控制器的颤振下拉菜单?
- widgetkit - 仅限于 WidgetKit 时间线条目?
- python - Orange下如何使用Python创建交互式绘图?
- json - Dart 接收“实例”而不是值