如何在Sanity返回的嵌套对象数组中筛选多分类博客？

数据老陈

2026-8-15

多分类博客筛选逻辑调整方案

问题说明

从Sanity无头CMS获取的博客数据中，category字段为数组结构（单篇博客可归属多个分类），原筛选代码仅适配单个分类对象的场景，需调整逻辑实现选中分类的筛选功能。

原筛选代码

const router = useRouter();
const { category: activeCategory } = router.query;
const filteredBlogs = React.useMemo(() => {
  return activeCategory
    ? blogs.filter(
        (blog) => blog.category?.slug?.current === activeCategory
      )
    : downloads;
}, [activeCategory, blogs]);

示例数据

{
  "mainImage": {
    "asset": {
      "url": "https://cdn.sanity.io/images/s4nay89j/production/186a158c78e3d37ebe43c4197fe5f8c7854d0ae1-750x500.webp"
    }
  },
  "image": null,
  "title": "Keeping A Fitness Journal to Find Your Perfect Routine",
  "slug": {
    "current": "keeping-a-fitness-journal-to-find-your-perfect-routine"
  },
  "date": "2022-06-12",
  "category": [
    {
      "name": "Fitness",
      "slug": {
        "current": "fitness"
      }
    },
    {
      "name": "Motivation",
      "slug": {
        "current": "motivation"
      }
    }
  ]
}

修改后的代码

const router = useRouter();
const { category: activeCategory } = router.query;
const filteredBlogs = React.useMemo(() => {
  if (!activeCategory) return blogs;

  return blogs.filter((blog) => {
    if (!blog.category) return false;
    // 遍历分类数组，匹配选中的分类slug
    return blog.category.some(cat => cat.slug?.current === activeCategory);
  });
}, [activeCategory, blogs]);