将打字稿哈希图标题反应为内部的键和值

Question

我正在尝试显示属于一个元素的多个项目，即属于键的值。这种情况下的关键是像

这样的标题

电子

产品 1

产品2

prod3

家电

prod4

prod5

prod6

所以我有一个带有元素数组的类型，其中一个元素是标题，而其他元素显示在

下

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 语句，但我不知道如何只打印出标题中的键和下面的产品。但我需要帮助，或者任何指示都会有所帮助。

Answer 1

我为感兴趣的人弄明白了。

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}
    </>   
);
}

将打字稿哈希图标题反应为内部的键和值

React typescript hashmap title as key and values inside

hashmap

typescript

reactjs

电子

家电