通过点击与react中使用hooks相关的按钮来过滤图像

Question

我有图像来自文件数据json，他们出现在页面上，而项目是渲染，但当我点击上面的按钮过滤没有图像出现

我创建if条件当我点击第一个按钮它传递参数调用"all"所以它应该显示所有的图像但是当我点击其他按钮时它应该显示类别包含按钮传递参数的图像但是当我调试它时数组为空

"portfolio" : [
{
"id":1,
"image": "./images/Portfolio/portfolio-img1.jpg",
"category":["html","wordpress","mobile"]
},
{
"id":2,
"image": "./images/Portfolio/portfolio-img2.jpg",
"category":["html","photoshop"]
},
{
"id":3,
"image": "./images/Portfolio/portfolio-img3.jpg",
"category":["html","wordpress"]
},
{
"id":4,
"image": "./images/Portfolio/portfolio-img4.jpg",
"category":["html","mobile"]
}
] ,
```
function Portfolio() {
const [Images, setImages] = useState([])

useEffect(()=>{
axios.get('data/data.json').then(res =>{
setImages(res.data.portfolio)
})
},[])
const handleClick  = (categoryName)=>{
let test = Images;
console.log( categoryName);

if(categoryName === 'all'){
setImages(test)
console.log(test)
}else{
test = Images.filter((img,i)=>{
img.category.includes(categoryName)
})
setImages(test)
console.log(test)
}
}
const portfolioImages = Images.map((item, i)=>{
return(
<BoxDev key={i}>
<Img src={item.image} alt=""/>
<Overlay>
<BoxSpan>
Show Image
</BoxSpan>
</Overlay>
</BoxDev>
)
})

return (
<Section>
<Title><TitleSpan>My</TitleSpan> Portfolio</Title>
<List>
<ListItem active onClick={() => handleClick('all')}>All</ListItem>
<ListItem  onClick={() => handleClick("html" )}>HTML</ListItem>
<ListItem  onClick={() => handleClick("photoshop")}>Photoshop</ListItem>
<ListItem  onClick={() => handleClick("wordpress")}>Wordpress</ListItem>
<ListItem  onClick={() => handleClick("mobile")}>Mobile</ListItem>
</List>

<div className="box">
{portfolioImages}
</div>
</Section>
)
}

Answer 1

当您使用过滤图像调用setImages时，您将失去原始的Images。您需要将categoryName保存为状态，并根据其值进行滤波。

const [filter, setFilter] = useState('all');
...

const handleClick  = (categoryName)=>{
setFilter(categoryName);
}

const portfolioImages = (filter === 'all' ? Images : Images.filter(img => img.category.includes(filter))).map((item, i)=>{
return(
<BoxDev key={i}>
<Img src={item.image} alt=""/>
<Overlay>
<BoxSpan>
Show Image
</BoxSpan>
</Overlay>
</BoxDev>
)
})

Answer 2

您没有使用filter中的return条件。

改变这

test = Images.filter((img,i)=>{
img.category.includes(categoryName)
})

test = Images.filter((img,i)=>{
return img.category.includes(categoryName)
})