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

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

[{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"}
]

在网页上，通过选择设置选项；选择按钮还可以按如下方式设置状态组件：

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

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

每次选择一个选项时，我都希望缩小产品的组合（基于选择），直到我最终只获得一个可用选项（该组合还用于手动重新填充选择，根据以前的选择添加或删除可用选项）

到目前为止，我一直在使用（在select上onChange调用的函数中）：

但这种方式会根据最新的选择减少，因此如果我开始选择250gr，它会给我一组3（25,27,28） 然后，如果我选择介质，它会给我一组2（25和26）只对介质进行过滤，忽略权重

---

我希望在对象上转换我的筛选器，而不是在event.target.value上转换，但我找不到正确的方法，任何人都可以帮助？

您需要像这样保留选定的筛选器：

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)
);

现在，您可以按如下方式进行筛选：

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)
);

条目将为您提供筛选器对象的键和值对。使用每个，检查所有过滤器是否匹配

现在，您只需为输入指定一个适合您姓名的名称：

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

---

你能发布完整的代码吗？@MosheSommers这是我的代码sandbox.io/s/grateate-tereshkova-7uovc？file=/src/App.jsi尝试了状态方法，将完整对象保存在一个过滤对象中，每次我更改一个select（页面上有任意数量的select）我过滤并使用过滤后的状态再次设置状态；它进行了向下过滤（我可以在所有选择中找到一个结果设置），但它没有取消过滤，我无法跟踪可用选项。这看起来像是一个更复杂的问题，我在说什么。你能分享你的代码吗？这是我的代码。它根本没有按照预期工作，我对此有很多困惑：（例如，如果我在第一个字段中选择250gr，它将以正确的方式设置第二个和第三个字段，但在第二个字段中，我选择的内容将重置回未筛选的onesOk，这样您就有了一个非常嵌套的数据结构。请检查：。您需要侦听onChange之外的更改以获取所有需要的信息，因为设置状态是谢谢！这解决了我的问题的一部分，它没有从不可用的选项中过滤出主要的心房（所以它不会导致空的变化数组），而且我必须考虑如果选择的选项是第一个或唯一的，这不应该被过滤掉。

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