Nested Array.prototype.map

Question

所以我有点拘泥于这个。

我正在尝试呈现一个带有产品名称、价格和数量的购物车对象。

每个产品都可能有自己的产品选项对象阵列。

我所坚持的是用他们各自的产品选项组来呈现产品选项。

比如说，一顿饭可能有浇头和饮料作为选项组，而单独的浇头或饮料本身就是选项。

以下是渲染的图像输出：

推车渲染图像输出

以下是产品选项渲染部分的代码：

{
!!item["productOptions"].length && (
<>
<List sx={{ mt: "-16px", pt: 0, pl: 1 }}>
{Object.keys(cartOptgroups).map((keyId, i) => (
<>
<ListItem sx={{ pb: "2px", pt: "2px" }}>
<Grid container>
<Grid item xs={2}>
<div></div>
</Grid>
<Grid item xs={8}>
<Typography sx={{ pr: "8px" }} variant="body2">
{cartOptgroups[keyId] + ":"}
</Typography>
{item["productOptions"].map((option, index) => (
<>
{option.groupId == keyId && (
<>
<Chip
sx={{ mt: "4px", mr: "4px" }}
variant="filled"
size="small"
color="default"
label={option.optionName}
/>
</>
)}
</>
))}
</Grid>
<Grid item xs={2}>
<div></div>
</Grid>
</Grid>
</ListItem>
</>
))}
</List>
</>
);
}

因此，当推车被渲染时，我基本上是在构建一个可能的选项组的对象：

{1: Accompagnement, 2: Extras}

我有一个选项对象数组：

[{
groupId: groupId,
groupName: groupName,
optionId: optionId,
optionName: optionName,
optionPrice: optionPrice,
}]

然后我通过groups对象进行映射并渲染组名称。然后，我映射选项数组本身，并比较选项数组中选项本身的相关groupId是否等于groups对象内部的id，如果相等，则渲染选项。

因此，问题是，由于我首先遍历groups对象，然后遍历options数组，因此无论是否有匹配的选项，我都会渲染组名。但是，如果我先浏览选项数组，我将多次渲染组名称。由于groups对象是独立构建的，因此它不包含任何与选项数组进行比较的方法。

我觉得这可以通过在构建groups对象时包含数据来解决，这样我就可以将其与选项数组进行比较，或者我可以在渲染时设置变量？有人能给我指正确的方向吗？如有任何帮助，我们将不胜感激。谢谢

Answer 1

最后，我重新构建了将产品选项添加到购物车的方式：

因此，当我选中或取消选中框时，我的子组件将像以前一样传递相同的选项对象：

let option = {
groupId: groupId,
groupName: groupName,
optionId: optionId,
optionName: optionName,
optionPrice: optionPrice,
}

父函数接收选项对象，并构建对象结构，以从子组件添加到购物车项目：

let object = {
groupId: option.groupId,
groupName: option.groupName,
groupOptions: [{
optionId: option.optionId,
optionName: option.optionName,
optionPrice: option.optionPrice
}]
};

在此之前，它会检查组是否已经存在，如果已经存在，则只将选项对象附加到groupOptions:中

let currentOption = {
optionId: option.optionId,
optionName: option.optionName,
optionPrice: option.optionPrice
}

现在我只将它渲染为一个简单的嵌套array.prototype.map，一切都很好。