尝试将筛选器应用于嵌套数组中的类别，该数组中包含大量的对象。
尝试将筛选器应用于嵌套数组中的类别，该数组中包含大量的对象。
提问于 2022-03-25 10:22:41
我有6篇文章，我想知道如何过滤文章的基础上的文章类别。目前，在项目数组中有这个嵌套的类别数组。
现在我有了一些类别的静态按钮，但是onClick我需要它们来过滤现有的文章数组。
import { NextPage } from "next";
import Head from "next/head";
import PreFooterModule from "@modules/PreFooterModule";
import Footer from "@components/Footer";
import ArticlesHero from "@components/ArticlesHero";
import Link from "next/link";
import { useState } from "react";
const Articles: NextPage = () => {
const [articles, setArticles] = useState([
{
image: "https://picsum.photos/1280/720?=1",
title: "Article #1",
text: "Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.",
categories: ["Fashion", "Products"],
},
{
image: "https://picsum.photos/1280/720?=2",
title: "Article #2",
text: "Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.",
categories: ["Fashion", "Travel"],
},
{
image: "https://picsum.photos/1280/720?=3",
title: "Article #3",
text: "Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.",
categories: ["Movies", "Studio"],
},
{
image: "https://picsum.photos/1280/720?=4",
title: "Article #4",
text: "Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.",
categories: ["Fashion", "Products"],
},
{
image: "https://picsum.photos/1280/720?=5",
title: "Article #5",
text: "Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.",
categories: ["Television", "Movies"],
},
{
image: "https://picsum.photos/1280/720?=6",
title: "Article #6",
text: "Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.",
categories: ["Studio", "Fashion"],
},
]);
return (
<>
<Head>
<title>Artikel Overzicht</title>
<meta name="author" content="" />
<meta name="description" content="" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ArticlesHero
title="Artikel Overzicht"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
/>
<div className="max-w-screen-xl px-6 pt-16 pb-12 mx-auto lg:px-8 text-navyBlue">
<div className="flex gap-2 py-7">
<a href="#" className="badge badge-primary">
Fashion
</a>
<a href="#" className="badge badge-primary">
Studio
</a>
<a href="#" className="badge badge-primary">
Movies
</a>
<a href="#" className="badge badge-primary">
Products
</a>
<a href="#" className="badge badge-primary">
Travel
</a>
<a href="#" className="badge badge-primary">
Television
</a>
</div>
<div className="grid grid-cols-1 gap-y-10 gap-x-4 md:grid-cols-12">
{articles.map(({ image, title, text, categories }) => (
<article className="col-span-6 lg:col-span-4">
<img
className="object-cover rounded-md aspect-video"
src={image}
alt=""
/>
<div className="pt-4">
<div className="card-actions">
{categories.map((category) => (
<Link href="/tag/fashion" passHref>
<span className="text-[11px] font-semibold uppercase cursor-pointer badge badge-outline hover:bg-navyBlue hover:text-white">
{category}
</span>
</Link>
))}
</div>
</div>
<div className="py-3">
<h5 className="mb-2 text-2xl font-medium tracking-tight text-navyBlue md:text-3xl">
{title}
</h5>
<p className="text-sm leading-snug text-black md:text-normal">
{text}
</p>
<Link href="/article/first-article" passHref>
<span className="inline-flex items-center justify-center px-4 py-1.5 md:py-2 text-xs font-medium uppercase transition duration-150 ease-in-out bg-transparent border rounded-full shadow-sm cursor-pointer mt-5 text-navyBlue border-navyBlue place-self-start hover:border-transparent hover:bg-navyBlue hover:text-white">
Read more
<svg
className="w-4 h-4 ml-2 -mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clipRule="evenodd"
></path>
</svg>
</span>
</Link>
</div>
</article>
))}
</div>
</div>
<PreFooterModule />
<Footer />
</>
);
};
export default Articles;回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-25 10:33:52
首先你需要克隆这个州。需要有一份文章的副本。这样，如果我们过滤和设置状态，我们就不会丢失其他文章。所以做些类似的事情
const [articlesCopy, setArticlesCopy] = useState(articles)然后，在单击每个按钮时，您应该以类别作为参数触发一个函数。该函数负责对articlesCopy中的数据进行过滤，并设置为文章状态。
所以创建一个函数，
const filterByCategory = (category) => {
const filteredArticles = articles.filter(article => article.categories.includes(category); // Filter based on category
setArticles(filteredArticles); // Set the actual state, so it re-renders
}在你的按钮上做一些类似的事情，
<a onClick={()=>filterByCategory("Fashion")} className="badge badge-primary">
Fashion
</a>
<a onClick={()=>filterByCategory("Movies")} className="badge badge-primary">
Movies
</a>
....首先你需要克隆这个州。需要有一份文章的副本。这样，如果我们过滤和设置状态，我们就不会丢失其他文章。所以做些类似的事情
const [articlesCopy, setArticlesCopy] = useState(articles)然后，在单击每个按钮时，您应该以类别作为参数触发一个函数。该函数负责对articlesCopy中的数据进行过滤，并设置为文章状态。
所以创建一个函数，
const filterByCategory = (category) => {
const filteredArticles = articles.filter(article => article.categories.includes(category); // Filter based on category
setArticles(filteredArticles); // Set the actual state, so it re-renders
}在你的按钮上做一些类似的事情，
<a onClick={()=>filterByCategory("Fashion")} className="badge badge-primary">
Fashion
</a>
<a onClick={()=>filterByCategory("Movies")} className="badge badge-primary">
Movies
</a>
....要动态地呈现这些按钮，您可以这样做，
let categories = [];
articles.forEach(article => {
categories.push(article.categories);
});
categories = Array.from(new Set(categories));
setCategories(categories);并使用这个新的类别状态来呈现这些按钮。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71615372
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号