React中如何基于布尔值标签状态筛选图片数据？

核心需求：根据filteredTags中标记为true的标签，筛选出标签数组包含至少一个选中标签的图片项；若未选中任何标签，则显示全部图片。

完整代码实现 #

const [filteredTags, setFilteredTags] = useState({}); // 建议初始化为空对象，避免undefined引发报错

const PortfolioData= [
    {
      name: "John & Johna ",
      tag: ["wedding", "couple"],
      img: [ src1 , src2, ...]
    },
    {
      name: "Mario & Marie",
      tag: ["couple", "NSFW"],
      img: [ src1 , src2, ...]
    },
];

return(
<>
 {PortfolioData
    .filter(visible => {
      // 无选中标签时，直接返回所有图片
      if (!filteredTags || Object.values(filteredTags).every(val => !val)) {
        return true;
      }
      // 提取所有被选中的标签
      const activeTags = Object.entries(filteredTags)
        .filter(([_, isActive]) => isActive)
        .map(([tag]) => tag);
      // 检查当前图片标签是否与选中标签有交集
      return visible.tag.some(tag => activeTags.includes(tag));
    })
    .map((item) => (                    
      <Tile                                         
        header={item.name}
        imgSrc={item.mainImg[0]}
      />
    ))}
</>
)

逻辑拆解 #

1. 初始状态处理：

   • 将useState初始值设为{}，避免filteredTags为undefined时的报错。
   • 若所有标签都未选中（值全为false），直接返回全部图片项。

2. 提取选中标签：

   • 用Object.entries把filteredTags转为键值对数组，筛选出值为true的标签，再提取标签名组成activeTags数组。

3. 筛选匹配项：

   • 利用数组some方法，检查当前图片的标签数组中是否存在至少一个在activeTags内的标签，满足条件则保留该图片。

可选逻辑调整 #

如果需要实现必须包含所有选中标签的筛选（比如同时选中couple和NSFW时，仅显示同时拥有这两个标签的图片），只需把some替换为every：

return activeTags.every(tag => visible.tag.includes(tag));

内容的提问来源于stack exchange，提问作者Spluli