使用React Hooks实现图片筛选功能时点击按钮无图片显示问题排查

问题原因 #

• filter回调语法错误：你在filter的箭头函数中使用了大括号包裹逻辑，但没有显式写return语句，导致所有项的判断结果都返回undefined，filter会过滤掉所有返回假值的项，最终得到空数组。
• 状态设计不合理：你直接把全量图片数据存在Images状态，每次筛选后直接覆盖这个状态，后续筛选只能在已筛选的小数组中查找，既无法恢复全量数据，也会导致多次筛选结果不符合预期。

修复方案 #

1. 新增一个状态存储原始全量图片数据，所有筛选操作都基于全量数据执行
2. 修正filter回调的返回逻辑
3. 避免直接修改原状态的引用

修复后代码 #

JSON结构保持不变，组件代码修改如下：

function Portfolio() {
    // 新增originImages存储全量原始数据，Images存储当前要展示的筛选结果
    const [originImages, setOriginImages] = useState([])
    const [Images, setImages] = useState([])

    useEffect(()=>{
        axios.get('data/data.json').then(res =>{
            setOriginImages(res.data.portfolio)
            // 初始化默认展示所有图片
            setImages(res.data.portfolio)
        })
    },[])

    const handleClick  = (categoryName)=>{
        if(categoryName === 'all'){
            setImages(originImages)
        }else{
            // 修正filter回调，省略大括号隐式返回判断结果
            const filteredImages = originImages.filter(img => img.category.includes(categoryName))
            setImages(filteredImages)
        }
    }

    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>
    )
}

内容的提问来源于stack exchange，提问作者Mona Omar