我正在开发一个React应用程序,模拟一个零售网站。我的主页展示了一个商品,下方有相关产品的卡片组件。当我点击相关产品中的一个按钮时,会打开一个比较对话框,比较当前产品和所点击产品的功能。为了实现这一点,我想创建一个数组,包含所点击产品和主页面产品的结合功能。但是,我一直在努力创建一个对象数组,其中每个独特的功能都有一个关于该功能以及该功能属于哪种产品的数据对象。
目前,我已经能够得到两个产品具有的所有功能的数组,但是如果产品具有重叠的功能,则此数组将重复。这让我不确定如何渲染比较表格,因为我计划映射整个数组并为每个功能创建一行表格。我当前的代码格式化这些功能如下:
这样做的结果是:
如果有人能够指导我如何更改格式化函数以实现此目的,我将不胜感激。另外,如果有人知道如何在当前结果下使用单行动态格式化表格的更好方法,请告诉我。
传入我的辅助函数的数据如下:
CurrentProd:
目前,我已经能够得到两个产品具有的所有功能的数组,但是如果产品具有重叠的功能,则此数组将重复。这让我不确定如何渲染比较表格,因为我计划映射整个数组并为每个功能创建一行表格。我当前的代码格式化这些功能如下:
formatFeatures: (currentProd, clickedProd) => {
let combinedFeatures = [];
if (clickedProd.features) {
clickedProd.features.forEach(feature => {
let obj = {}
let vals = Object.values(feature);
obj[vals[0]] = [vals[1], clickedProd.id]
combinedFeatures.push(obj)
})
}
currentProd.features.forEach(feature => {
let obj = {}
let vals = Object.values(feature);
obj[vals[0]] = [vals[1], currentProd.id]
combinedFeatures.push(obj)
})
let formattedFeatures = combinedFeatures.reduce((allFeatures, feature) => {
if (Object.keys(feature) in allFeatures) {
allFeatures = [allFeatures[Object.keys(feature)]].concat(feature);
} else {
allFeatures.push(feature);
}
return allFeatures;
}, [])
这样做的结果是:
[{
"Fabric": ["100% Cotton", 28214]
}, {
"Cut": ["Skinny", 28214]
}, {
"Fabric": ["Canvas", 28212]
}, {
"Buttons": ["Brass", 28212]
}]
这非常接近我所寻找的内容,我有一个包含产品特征和产品id信息的对象数组,但是“面料”中的重复是我正在努力解决的问题。理想情况下,结果应该看起来像这样:
[{
"Fabric": ["100% Cotton", 28214],
["Canvas", 28212]
}, {
"Cut": ["Skinny", 28214]
}, {
"Buttons": ["Brass", 28212]
}]
如果有人能够指导我如何更改格式化函数以实现此目的,我将不胜感激。另外,如果有人知道如何在当前结果下使用单行动态格式化表格的更好方法,请告诉我。
传入我的辅助函数的数据如下:
CurrentProd:
{
"id": 28212,
"name": "Camo Onesie",
"slogan": "Blend in to your crowd",
"description": "The So Fatigues will wake you up and fit you in. This high energy camo will have you blending in to even the wildest surroundings.",
"category": "Jackets",
"default_price": "140.00",
"created_at": "2021-07-10T17:00:03.509Z",
"updated_at": "2021-07-10T17:00:03.509Z",
"features": [{
"feature": "Fabric",
"value": "Canvas"
}, {
"feature": "Buttons",
"value": "Brass"
}]
}
点击产品:
{
"name": "Morning Joggers",
"category": "Pants",
"originalPrice": "40.00",
"salePrice": null,
"photo": "https://images.unsplash.com/photo-1552902865-b72c031ac5ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80",
"id": 28214,
"features": [{
"feature": "Fabric",
"value": "100% Cotton"
}, {
"feature": "Cut",
"value": "Skinny"
}]
}