条目"/>
通过两个查询过滤 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;
})
根据下面的评论,要么选择年份作为数字,要么使用
==
代替 ===
。
更多推荐
通过两个查询过滤 NextJS 中的条目
发布评论