嵌套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是否等于组对象中的id，如果选项相等，则呈现该选项。

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

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

Answer 1

最后，我调整了将产品选项添加到购物车中的方式：

因此，当我选中或取消复选框时，我的子组件将传递与前面相同的选项对象：

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

父函数接收选项对象并从子组件构建要追加到add to cart项的对象结构：

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，一切都很好。