Javascript 在React应用程序上显示来自rest API的产品变体

因此，我试图在我的react应用程序上以动态下拉列表的形式显示产品的不同变化

"variations": [
        {
            "id": 224,
            "attributes": [
                {
                    "id": 0,
                    "name": "Size",
                    "option": "For iPhone XR"
                },
                {
                    "id": 0,
                    "name": "Color",
                    "option": "yellow"
                }
            ]
        },
        {
            "id": 223,
            "attributes": [
                {
                    "id": 0,
                    "name": "Size",
                    "option": "For iPhone 8Plus"
                },
                {
                    "id": 0,
                    "name": "Color",
                    "option": "yellow"
                }
            ]
        },
        {
            "id": 222,
            "attributes": [
                {
                    "id": 0,
                    "name": "Size",
                    "option": "For iPhone 8"
                },
                {
                    "id": 0,
                    "name": "Color",
                    "option": "green"
                }
            ]
        }
]

我得到了这个变体数组，我希望每个属性都在一个单独的下拉列表中，当我更改一些下拉列表的值时，它将只显示具有相同值的变体

例如：假设我选择了“适用于iPhone XR”的尺寸，那么在颜色下拉列表中仅显示“黄色”，或者如果我在尺寸下拉列表中选择了“绿色”仅显示“适用于iPhone 8”

---

我真的一直在试图找到一种方法来做到这一点，但我在一个点上，我想不出什么。我非常感谢您的帮助。

我很乐意为您效劳。你找到解决方法了吗？@jped我能解决它，不知道它是否是理想的解决方案，但它能满足我的需要，看一看，它可能会帮助你：@Freddie Great！我也需要这个。因此，当我添加组件时，我的页面如下所示：，我做错了什么？