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

Question

所以，我试图在我的反应应用程序上显示动态下拉列表中产品的不同变体。

"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”。

我真的一直在试图找到一种方法来做到这一点，但我正处于一个我想不出任何东西的地步。我真的很感激任何帮助。

标签： javascriptarraysreactjswordpresswoocommerce-rest-api