通过两个查询过滤 NextJS 中的条目

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

[
    {
        "title": "Плагин WordPress для Рекомендательного виджета Яндекса",
        "image": "/images/works/yk.jpg",
        "year": 2022,
        "category": "WordPress",
        "link": "/",
        "description": "Заказчик использует на некоторых сайтах виджет рекомендаций от Яндекса, который позволяет показывать ссылки на статьи сайта вместе с рекламой Яндекса. Проблема в том, что система от отечественного поисковика не очень умная и тянет в виджет не только статьи, но и много чего не нужного. Я написал микроплагин, который дает возможность автоматически проставлять специальный тег на страницах, которые не нужно показывать в виджете, а также позволяет исключать некоторые статьи из виджета вручную"
    },
    {
        "title": "Сайт студии переводов «АкадемПеревод»",
        "image": "/images/works/ap.jpg",
        "year": 2022,
        "category": "WordPress",
        "link": "/",
        "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>
    )
}

过滤器有效，这里位于测试域 - /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

你能告诉我如果没有显示元素如何输出一些消息吗？例如，“未找到任何内容。选择其他过滤器”

对于多个过滤器，您需要按如下方式定义过滤器函数

const filteredWork = work.filter(w => {
   const catFilter = selectedCat ? w.category === selectedCat : true; // true if no category selected
   const yearFilter = selectedYear ? w.year === selectedYear : true; // true if no year selected
   return catFilter && yearFilter;
})

根据下面的评论，要么选择年份作为数字，要么使用

==

===