如何在React中按状态数组过滤数据对象？

debugcn 发表于 Dev

Zak Faithfull

回答-我已更新以下代码以显示工作示例。

我目前正在使用React系统在React中构建投资组合。例如，用户将转到项目组合页面，然后选择要查看其项目的过滤器（网页设计，开发等）。

我创建了一个名为updatedProjects的新数组，该数组应包括从ProjectData筛选出的项目。我在下面提供了一个示例，其中我要求updatedProjects包含具有标签“ Brand Identity”或“ Web Design”之一的任何项目...

ProjectData.tsx

const ProjectData = [
  {
    title: "Project 1",
    tags: [
      { title: "Web Development", value: "web-development" },
    ],
  },
  {
    title: "Project 2",
    tags: [
      { title: "Brand Identity", value: "brand-identity" },
      { title: "Brand Messaging", value: "brand-messaging" },
    ],
  },
  {
    title: "Project 3",
    tags: [
      { title: "Brand Identity", value: "brand-identity" },
      { title: "Brand Guidelines", value: "brand-guidelines" },
      { title: "Brand Messaging", value: "brand-messaging" },
      { title: "Web Design", value: "web-design" },
    ],
  },
];

Projects.tsx

const filterProjects = (title) => {

// if filter is not already in array, add it. Else, remove it.
let updatedFilters = [];

if (!selectedFilters.includes(title)) {
  updatedFilters = [...selectedFilters, title];
} 
else {
  const updatedTags = selectedFilters.filter((el) => el !== title);
  updatedFilters = updatedTags;
}

setSelectedFilters(updatedFilters);


let updatedProjects = []; 

// Here I need to filter ProjectData using the selectedFilters state array. 
// This currently just filters by the most recent filter 'title', and not by 
// ALL titles in the selectedFilters array.

updatedProjects = ProjectData.filter((project) =>
  project.tags.some((tag) => updatedFilters.includes(tag.title))
);

setFilteredProjects(updatedProjects);
};

湿婆神

好吧，我看了看你的旧代码。您可以按照以下步骤进行操作以达到所需的结果。

const filterProjects = (title) => {

// if filter is not already in array, add it. Else, remove it.
let updatedFilters = [];

if (!selectedFilters.includes(title)) {
  updatedFilters = [...selectedFilters, title];
} 
else {
  const updatedTags = selectedFilters.filter((el) => el !== title);
  updatedFilters = updatedTags;
}

setSelectedFilters(updatedFilters);


let updatedProjects = []; 

// Here I need to filter ProjectData using the selectedFilters state array. 
// This currently just filters by the most recent filter 'title', and not by 
// ALL titles in the selectedFilters array.

updatedProjects = ProjectData.filter((project) =>
  project.tags.some((tag) => updatedFilters.includes(tag.title))
);

setFilteredProjects(updatedProjects);
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。