React中如何根据值为数组的键筛选对象？

问题背景 #

数据集示例：

[
    {
        "crystal_name": "African Tourmaline",
        "properties": ["Grounding", "Protection"]
    },
    {
        "crystal_name": "Amazonite",
        "properties": ["Calming", "Balance", "Truth"]
    },
    ....
]

需求：选择一个或多个属性时，筛选出同时具备所有选中属性的水晶项。比如选"Calming"和"Balance"，仅显示同时拥有这两个属性的Amazonite，而非只要包含任一属性就显示。

你当前的代码逻辑是“包含任一选中属性即显示”，不符合需求：

const filterItems = () => {
  if(selectedFilters.length > 0) {
    let tempItems = selectedFilters.map((selectedCategory) => {
        let temp = crystals.filter((crystal) => {
        let flag = 0;
        for(let i=0; i<crystal.properties.length; i++) {
            if(crystal.properties[i] === selectedCategory) {
                flag = 1;
                break;
            }
        }
        if(flag === 1) return crystal;
        });
        return temp;
    })
    console.log(crystalsToShow);
    console.log(tempItems);
    setCrystalsToShow(tempItems.flat());
  } else {
    setCrystalsToShow([...crystals]);
  }
};

修正方案 #

直接对crystals数组做一次过滤，用Array.every()方法判断每个水晶是否包含所有选中的属性：

const filterItems = () => {
  if (selectedFilters.length > 0) {
    // 筛选出同时包含所有选中属性的水晶
    const filtered = crystals.filter(crystal => 
      selectedFilters.every(filter => crystal.properties.includes(filter))
    );
    setCrystalsToShow(filtered);
  } else {
    setCrystalsToShow([...crystals]);
  }
};

逻辑说明 #

• selectedFilters.every(...)：检查每一个选中属性，是否都存在于当前水晶的properties数组中
• crystal.properties.includes(filter)：判断单个属性是否在水晶的属性列表内
• 只有当所有选中属性都满足时，该水晶才会被保留在过滤结果中

这个逻辑比原代码更简洁高效，完全符合“多属性同时满足”的筛选需求。

内容的提问来源于stack exchange，提问作者Tanishq M.