嵌套 Array.prototype.map

Question

所以我有點堅持這個。

我正在嘗試渲染帶有產品名稱、價格和數量的購物車 object。

每個產品可能有自己的產品選項對象數組。

我堅持的是使用各自的產品選項組呈現產品選項。

也就是說，一頓飯可能有配料和飲料作為選項組，而單獨的配料或飲料本身就是選項。

這是渲染的圖像 output：

購物車渲染圖像 output

這是產品選項渲染部分的代碼：

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

因此，隨着購物車的呈現，我基本上是在構建一個 object 的可能選項組：

{1: Accompagnement, 2: Extras}

我有一系列選項對象：

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

然后我 map 通過組 object 並呈現組名稱。 然后我通過選項數組本身 map 比較選項數組中選項本身的關聯 groupId 是否等於組 object 內的 id，如果相等則呈現選項。

所以問題是，因為我先通過組 object 然后是選項數組，所以無論是否有匹配的選項，我都會呈現組名。 但是如果我先通過選項數組 go，我會多次渲染組名。 由於組 object 是獨立構建的，因此它不包含我可以與選項數組進行比較的任何方式。

我覺得這可以通過在構建組 object 時包含數據來解決，這樣我就可以將它與選項數組進行比較，或者我可以在渲染時設置變量？ 誰能指出我正確的方向？ 任何幫助將不勝感激。 謝謝！

Answer 1

最后，我重新調整了將產品選項添加到購物車的方式：

因此，當我選中或取消選中復選框時，我的子組件將像以前一樣傳遞相同的選項 object：

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

父 function 接收選項 object 並構建 object 結構以附加到子組件的添加到購物車項目：

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

在此之前，它會檢查該組是否已經存在，如果存在，則它只是將選項 object 附加到 groupOptions 中：

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

現在我只是將它渲染為一個簡單的嵌套 array.prototype.map 並且一切正常。