在javascript（reactJS）中从对象内部的多个键中搜索

Question

我有以下对象数组，表示产品的所有可能组合

[{id:25,attributes:[{id: 0, name: "Weight", option: "250gr"},{id: 0, name: "Roast", option: "Medium"},{id: 0, name: "Packaging", option: "Card"}
{id:26,attributes:[{id: 0, name: "Weight", option: "500gr"},{id: 0, name: "Roast", option: "Medium"},{id: 0, name: "Packaging", option: "Card"}
{id:27,attributes:[{id: 0, name: "Weight", option: "250gr"},{id: 0, name: "Roast", option: "Light"},{id: 0, name: "Packaging", option: "Card"}
{id:28,attributes:[{id: 0, name: "Weight", option: "250gr"},{id: 0, name: "Roast", option: "Light"},{id: 0, name: "Packaging", option: "Tin"}
]

在网页上，通过选择设置选项； select 还设置了一个 state 组件如下：

{Weight:"",Roast:"",Pakaging:""}

使用所选选项中的值，例如（假设仅选择重量和烘烤）：

{Weight:"250gr",Roast:"Light",Packaging:""}

每次选择一个选项时，我都想缩小产品组合（基于选择），直到我最终只有一个选项可用（该组合也用于动态重新填充选择，根据先前的添加或删除可用选项选择）

直到现在我都在使用类似的东西（在 onChange 在选择上调用的函数内部）：

const result = variations.filter((p) =>
  p.attributes.some((c) => c.option === event.target.value)
);

但是这种方式会根据最新的选择减少，所以如果我开始选择 250gr，它会给我一组 3 (25,27,28) 那么如果我选择中等，它会给我一组 2（25 和 26）只过滤中等并忽略重量

我正在寻找转换我的过滤器，而不是在 event.target.value 上的对象上，但我找不到正确的方法，有人可以帮忙吗？

Answer 1

您需要像这样持久化选定的过滤器：

const [filters, setFitlers] = React.useState({});
const onFilterChange = (e) => {
        setFitlers(prevFilters => ({...prevFilters, [e.target.name]: e.target.name})
   }

现在你可以像这样过滤：

const result = variations.filter((p) =>
  Object.entries(filters).every(([key, value]) => p.attributes[key] === value)
);

Obejct.entries 将为您提供过滤器对象的键值对。对于每一个，您都会检查是否所有过滤器都匹配。

现在您只需为输入命名以适合您的名字：

<input name="weight" onChange={onFilterChange} .../>

要删除过滤器，也可以过滤过滤器对象以删除空字符串：

Object.entries(filters).filter(([key,value) => value).every....