大家好，我有一个关于NextJS的项目。有一个由json生成的作品组合。

[
    {
        "title": "Плагин WordPress для Рекомендательного виджета Яндекса",
        "image": "/images/works/yk.jpg",
        "year": 2022,
        "category": "WordPress",
        "link": "https://188.ru/",
        "description": "Заказчик использует на некоторых сайтах виджет рекомендаций от Яндекса, который позволяет показывать ссылки на статьи сайта вместе с рекламой Яндекса. Проблема в том, что система от отечественного поисковика не очень умная и тянет в виджет не только статьи, но и много чего не нужного. Я написал микроплагин, который дает возможность автоматически проставлять специальный тег на страницах, которые не нужно показывать в виджете, а также позволяет исключать некоторые статьи из виджета вручную"
    },
    {
        "title": "Сайт студии переводов «АкадемПеревод»",
        "image": "/images/works/ap.jpg",
        "year": 2022,
        "category": "WordPress",
        "link": "https://academperevod.ru/",
        "description": "Осовременивали сайт, не перезжая с Wordpress на другие платформы. В основе проекта - дизайн в Фигме и редактор Elementor. Сложная, долгая и кропотливая работа",
        "scroll": true
    }
]

字符串
我决定按类别过滤元素，这是由json指定的。下面是我的组件，它显示了一个类别列表，并在页面上所有作品的列表上方添加了过滤：

//filter-work.js

import works from "@/content/works/data.json"

export default function FilterWork({selectedCat, onSelect}) {

    const splitCats = works.flatMap((w) => w.category.split());
    const categories = Array.from(new Set(splitCats));

    return (
        <div>
            <ul>
                <li
                    className={!selectedCat ? "bg-indigo-50 p-2 rounded-md" : "p-2"}
                    onClick={() => onSelect("")}
                >
                    <a>Все</a>
                </li>
                {categories.map((category, i) => {
                    const isSelected = category === selectedCat
                    return (
                        <li key={i} item={category}
                            className={isSelected ? "bg-indigo-50 p-2 rounded-md" : "p-2"}
                            onClick={() => onSelect(category)}
                        >
                            {category}
                        </li>
                    )

                    })}
            </ul>

        </div>
    )
}

型
下面是显示过滤器中所有作品列表和类别列表的页面代码。我的主过滤器代码也在这里。

import { useState } from "react"
import Seo from "@/components/global/seo";
import Work from "../components/work";
import {getAllWork} from "@/lib/getAllData";
import styles from "@/styles/home/featuredWork.module.css"

import FilterWork from "@/components/filter-work";

export async function getStaticProps() {
    const work = getAllWork();

    return {
        props: {
            work,
        },
    };
}

export default function WorkPage({work}) {

     const [selectedCat, setSelectedCat] = useState("");

    const filteredCat = selectedCat ? work.filter((listItem) => listItem.category.includes(selectedCat))
    : work;

    return (
        <div>
            <Seo
                title="Все работы Колтан Леонида"
                description="Здесь собраны некоторые из работ разработчика Колтан Леонида"
                ogImageUrl={`http://localhost:3000/api/og?title=Все работы Колтан Леонида&description=Здесь собраны некоторые из работ разработчика Колтан Леонида`}
            />
            <section className='px-6'>
                <div className='wrapper'>
                    <h1 className='sectionTitle'>Проекты</h1>
                    <FilterWork
                        selectedCat={selectedCat}
                        onSelect={setSelectedCat}
                    />
                    <div className={styles.featuredWorkInner}>
                        {filteredCat.map((workItem) => (
                            <Work key={workItem.title} item={workItem} />
                        ))}
                    </div>
                </div>
            </section>
        </div>
    )
}

型
过滤器工作正常，这里是测试域-https://next-site-ivory-six.vercel.app/work。问题是我想添加另一个按年份的过滤器，这也是在json文件中指定的。我试着这样做：

const filteredCat = selectedCat ? work.filter((listItem) => listItem.category.includes(selectedCat)) && work.filter((listItem) => listItem.year.toString().includes(selectedCat)): work;

型
但没有什么是这样的。根据我在上面的代码中指定的运算符（&&或||），它是按类别或按年份过滤的，我需要有相互过滤--也就是说，如果我选择了Wordpress和2022，那么只对Wordpress类别和年份为2022的显示有效。怎么办呢？
你能告诉我，如果没有显示元素，如何输出一些消息吗？例如，“未找到任何内容。选择其他筛选器”