Question

我的产品页面由来自本地 URL 的 fetch API 调用的产品项目组成（我在此处包含了从 API 调用返回的数组，该数组存储在 products 变量中）。它有 6 个项目，其中 3 个是鞋子，3 个是耳机，鞋子项目有一个名为 skus 的嵌套属性对象，而耳机没有。

我希望我的产品页面显示所有 6 个项目，但是当我在页面中选择尺寸选择器下拉列表时，我只想过滤具有该特定尺寸的鞋子（尺寸是 skus 的对象属性）。

错误说它与三元运算符有关，有人可以澄清我，三元语法有什么问题。
谢谢。

API 调用返回的数组

{
      "id": 1,
      "category": "shoes",
      "image": "shoe1.jpg",
      "name": "Hiker",
      "price": 94.95,
      "skus": [
        { "sku": "17", "size": 7 },
        { "sku": "18", "size": 8 }
      ],
      "description": "This rugged boot will get you up the mountain safely."
    },
    {
      "id": 2,
      "category": "shoes",
      "image": "shoe2.jpg",
      "name": "Climber",
      "price": 78.99,
      "skus": [
        { "sku": "28", "size": 8 },
        { "sku": "29", "size": 9 }
      ],
      "description": "Sure-footed traction in slippery conditions."
    },
    {
      "id": 3,
      "category": "shoes",
      "image": "shoe3.jpg",
      "name": "Explorer",
      "price": 145.95,
      "skus": [
        { "sku": "37", "size": 7 },
        { "sku": "38", "size": 8 },
        { "sku": "39", "size": 9 }
      ],
      "description": "Look stylish while stomping in the mud."
    },
    {
      "id": 4,
      "category": "headphone",
      "image": "headphone3.jpg",
      "name": "headphone red",
      "price": 100,
      "description": "Red colored headphone"
    },
    {
      "id": 5,
      "category": "headphone",
      "image": "headphone2.jpg",
      "name": "headphone blue",
      "price": 90,
      "description": "Blue colored headphone"
    },
    {
      "id": 6,
      "category": "headphone",
      "image": "headphone1.jpg",
      "name": "headphone black",
      "price": 80,
      "description": "Black colored headphone"
    }

当我在下拉菜单中选择尺寸时的产品过滤代码

const filteredProducts = size
    ? products.filter((element) => {
        element.skus
          ? products.filter((element) => {
              element.skus.find(
                (element_skus) => element_skus.size === parseInt(size)
              );
            })
          : products;
      })
    : products;

错误是指行

element.skus

在产品过滤代码中

错误图片 error

Answer 1

我认为你所追求的是

function filterProducts(products, size) {
  // Nothing to filter - early-out.
  if (!size) return products;

  // Get the products which...
  return products.filter((product) => {
    // ... have any SKU that matches the desired size.
    return product.skus?.some((sku) => sku.size === size);
  });
}

不要试图对三重嵌套的三元运算符抱有幻想。

Answer 2

否，错误表明您开始了箭头函数，但没有继续使用代码块 {do_something;}。您继续使用类似 if 语句 if (expression)...

中的表达式

Answer 3

我猜你在尝试实现相对复杂的逻辑时最好不要使用三元运算符。我推荐以下内容：

const checkShoesAvailability = (products) => {
    return products.some((item) => item.skus !== undefined)
}

const filterProducts = (products, size) => {
    if (!checkShoesAvailability(products)) return products

    return products.filter((element) => element.skus?.some((sku) => sku.size === parseInt(size)))
}

我的三元运算符语法有什么问题

3 个答案: