使用按钮过滤React?中的数组映射

Question

我正在一个投资组合网站上工作，我想有两个按钮，一个用于"；打印"；和1表示"；数字"；。

在react中，我将所有项目都设置在一个名为"的对象数组文件中；项目列表"。

当我点击一个按钮时，它如何过滤数组映射中的项目，只显示具有相同"类别"值的项目？

目前我只能得到它，所以当我点击按钮时，它会将它们全部返回为"；真"；但是如果它与我单击的按钮的id不匹配，就无法将对象项的实际状态更改为false。

index.jsx文件：

import React, { useState } from "react"
import Seo from "../../components/seo"
import ProjectItem from "./ProjectItem";

export default function ProjectsPage() {
const [active, setActive] = useState();

return (
<>
<Seo title="Home" />
<div className="container">
<ProjectItem />
</div>
</>
)
}

ProjectItem.jsx文件：

import React, { useState } from "react"
import { Link } from "gatsby"
import { ProjectsList } from "./data";
export default function ProjectItem() {
const [active, setActive] = useState();
function getCategories(e) {
{ProjectsList.map((item, i) => {
if (e.target.id == item.category) {
setActive(true)
}
else {
setActive(false)
}
})
}
}
return (
<>
<h2>Projects</h2>
<div className="double-buttons spacer-4">
<button className="button" id="print" onClick={(e) => getCategories(e)}>
Print Button
</button>
<button className="button" id="digital" onClick={(e) => getCategories(e)}>
Digital Button
</button>
</div>
<div className="grid--col-4" id="projectsSection">
{
ProjectsList.map((item, i) => {
return (
<Link
to={item.path}
className={active ? 'project-tile active' : 'project-tile hidden'}
key={i}>
<div className="grid__cell">
<img src={item.backgroundUrl} alt={item.title} />
<div className="grid__cell__title">
<h4>{item.title}</h4>
</div>
</div>
</Link>
)
}
)
}
</div>
</>
)
}

data.js数组文件：

export const ProjectsList = [
{
title: 'Project 1',
backgroundUrl: 'backgroundUrl',
path: '#',
category: 'print',
active: true
},
{
title: 'Project 2',
backgroundUrl: 'backgroundUrl',
path: '#',
category: 'digital',
active: true
},
{
title: 'Project 3',
backgroundUrl: 'backgroundUrl',
path: '#',
category: 'print',
active: true
},
{
title: 'Project 4',
backgroundUrl: 'backgroundUrl',
path: '#',
category: 'digital',
active: true
},
]

Answer 1

您需要为projectList创建一个状态，这样当您更改任何数据时，它都会被保存，然后使用新值进行渲染。在您的情况下，每次它重新渲染时都会返回文件中的原始数据。所以我只想做这样的东西。

const [projectList, setProjectList] = useState([
{
title: 'Project 1',
backgroundUrl: 'backgroundUrl',
path: '#',
category: 'print',
active: true
},
{
title: 'Project 2',
backgroundUrl: 'backgroundUrl',
path: '#',
category: 'digital',
active: true
},
{
title: 'Project 3',
backgroundUrl: 'backgroundUrl',
path: '#',
category: 'print',
active: true
},
{
title: 'Project 4',
backgroundUrl: 'backgroundUrl',
path: '#',
category: 'digital',
active: true
},
])

因此，当你点击数字或打印按钮时，onClick功能将类似于

const getCategories = useCallback(()=>{
const newProjectList = [...projectList]
newProjectsList.map((item, i) => {
if (e.target.id == item.category) {
item.active = true
}
else {
item.active = false
}
})
setProjectList(newProjectList)
},[projectList, setProjectList])

我替换了活动状态，因为它没有连接到每个项目，所以毫无用处。因此，我根据单击的按钮将主对象中的每个项目状态从true更改为false。

您还需要对此进行修改，以读取每个项目的状态。

{
ProjectsList.map((item, i) => {
return (
<Link
to={item.path}
className={item.active ? 'project-tile active' : 'project-tile hidden'}
key={i}>
<div className="grid__cell">
<img src={item.backgroundUrl} alt={item.title} />
<div className="grid__cell__title">
<h4>{item.title}</h4>
</div>
</div>
</Link>
)
}
)
}