Question

我现在已经尝试了几种方法，但这只会使我更加困惑，可能仍然超出我的知识范围，但是试图使以下各项起作用：

我从woocommerce提取产品数据，并试图循环/映射变化。最终目标是为每个变体创建一个下拉列表（或单选按钮或其他任何东西），如下所示：

大小：S M L

颜色：红色蓝色绿色

这是我从woocommerce及以下版本获得的数据，我试图使其正常工作。

数据：

{
  "data": {
    "allWcProducts": {
      "edges": [
        {
          "node": {
            "variations": [
              {
                "id": 14,
                "attributes": [
                  {
                    "name": "color",
                    "option": "red"
                  },
                  {
                    "name": "size",
                    "option": "S"
                  }
                ]
              },
              {
                "id": 15,
                "attributes": [
                  {
                    "name": "color",
                    "option": "red"
                  },
                  {
                    "name": "size",
                    "option": "M"
                  }
                ]
              },
              {
                "id": 16,
                "attributes": [
                  {
                    "name": "color",
                    "option": "red"
                  },
                  {
                    "name": "size",
                    "option": "L"
                  }
                ]
              },
              {
                "id": 17,
                "attributes": [
                  {
                    "name": "color",
                    "option": "blue"
                  },
                  {
                    "name": "size",
                    "option": "S"
                  }
                ]
              },
              {
                "id": 18,
                "attributes": [
                  {
                    "name": "color",
                    "option": "blue"
                  },
                  {
                    "name": "size",
                    "option": "M"
                  }
                ]
              },
              {
                "id": 19,
                "attributes": [
                  {
                    "name": "color",
                    "option": "blue"
                  },
                  {
                    "name": "size",
                    "option": "L"
                  }
                ]
              },
              {
                "id": 20,
                "attributes": [
                  {
                    "name": "color",
                    "option": "green"
                  },
                  {
                    "name": "size",
                    "option": "S"
                  }
                ]
              },
              {
                "id": 21,
                "attributes": [
                  {
                    "name": "color",
                    "option": "green"
                  },
                  {
                    "name": "size",
                    "option": "M"
                  }
                ]
              },
              {
                "id": 22,
                "attributes": [
                  {
                    "name": "color",
                    "option": "green"
                  },
                  {
                    "name": "size",
                    "option": "L"
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  }
}

我目前仅输出的尝试

颜色

红色

M

.....
    const post = this.props.data.wcProducts
......
{
  post.variations.map((variations, i) => (
    <div key={`${post.variations} ${i}`}>
      <p>{post.variations[i].attributes[0].name}</p>

      {post.variations[i].attributes.map((wcProducts, i) => (
        <div key={`${post.variations} ${i}`}>
          <p>{post.variations[i].attributes[i].option}</p>
        </div>
      ))}
    </div>
  ));
}

尝试切换几乎所有内容，这让我感到更加困惑，因此任何输入都会受到赞赏。

Answer 1

这里是执行此操作的一种方法：

const data = { "allWcProducts": { "edges": [ { "node": { "variations": [ { "id": 14, "attributes": [ { "name": "color", "option": "red" }, { "name": "size", "option": "S" } ] }, { "id": 15, "attributes": [ { "name": "color", "option": "red" }, { "name": "size", "option": "M" } ] }, { "id": 16, "attributes": [ { "name": "color", "option": "red" }, { "name": "size", "option": "L" } ] }, { "id": 17, "attributes": [ { "name": "color", "option": "blue" }, { "name": "size", "option": "S" } ] }, { "id": 18, "attributes": [ { "name": "color", "option": "blue" }, { "name": "size", "option": "M" } ] }, { "id": 19, "attributes": [ { "name": "color", "option": "blue" }, { "name": "size", "option": "L" } ] }, { "id": 20, "attributes": [ { "name": "color", "option": "green" }, { "name": "size", "option": "S" } ] }, { "id": 21, "attributes": [ { "name": "color", "option": "green" }, { "name": "size", "option": "M" } ] }, { "id": 22, "attributes": [ { "name": "color", "option": "green" }, { "name": "size", "option": "L" } ] } ] } } ] } } 

const getOptions = data => {
  const result = data.allWcProducts.edges.reduce((r,{node}) => 
     node.variations.forEach(({attributes}) =>
        attributes.forEach(({name, option}) =>
           r[name] ? r[name].add(option) : r[name] = new Set([option]))) || r, {})
  return Object.entries(result).reduce((r, c) => (r[c[0]] = [...c[1]]) && r, {})
}

console.log(getOptions(data))

它将动态创建选项数组，此处的主要思想是使用ES6 reduce和Set，以确保值唯一。

最后一个reduce是由于结果以Set形式出现的，我们正在将它们转换为数组。

在react

1 个答案: