Checkbox过滤/useCallback首次点击返回空状态，二次点击才生效

问题根源 #

你的代码存在React状态更新的异步性问题：调用setFiltered后，filtered状态不会立即更新，首次点击复选框时，你依然在用旧的空数组执行过滤逻辑，导致输出为空。

修复方案 #

推荐采用状态更新与过滤逻辑分离的写法，这更符合React状态管理规范，也便于维护（尤其是你有12个过滤变量的场景）：

1. 重构复选框点击处理函数

只负责更新过滤状态，不处理过滤逻辑：

const checkOptionOksana = useCallback((e) => {
    const checkedValue = e.target.id;
    const isChecked = e.target.checked;
    
    if (isChecked) {
        setFiltered(prevFiltered => [...prevFiltered, checkedValue]);
    } else {
        // 补充取消勾选的逻辑
        setFiltered(prevFiltered => prevFiltered.filter(item => item !== checkedValue));
    }
}, []);

2. 用useEffect监听过滤状态变化，自动执行过滤

当filtered状态真正更新后，再执行过滤并更新结果数组：

import { useEffect } from 'react';

// 监听过滤条件变化，自动更新结果
useEffect(() => {
    let filteredClasses = classData;
    
    if (filtered.length > 0) {
        filteredClasses = classData.filter(singleClass => {
            return filtered.some(filterVal => 
                filterVal === singleClass.instructor || filterVal === singleClass.yoga
            );
        });
    }
    
    createYogaClassesArray(filteredClasses);
}, [filtered, classData, createYogaClassesArray]);

替代方案（直接修改原函数） #

如果不想拆分逻辑，也可以直接在点击函数里先计算出更新后的过滤数组，用这个值执行过滤：

const checkOptionOksana = useCallback((e) => {
    const checkedValue = e.target.id;
    const isChecked = e.target.checked;
    
    if (isChecked) {
        const updatedFiltered = [...filtered, checkedValue];
        setFiltered(updatedFiltered);
        
        const newFilteredYogaClassesArray = classData.filter(singleClass => {
            return updatedFiltered.some(filterVal => 
                filterVal === singleClass.instructor || filterVal === singleClass.yoga
            );
        });
        
        createYogaClassesArray(newFilteredYogaClassesArray);
    }
}, [filtered, classData, createYogaClassesArray]);

补充说明 #

• 原代码缺少取消勾选的处理逻辑，上面的方案都补上了，确保取消勾选时过滤结果能正确回退。
• 第一种分离逻辑的写法更适合多变量过滤的场景，避免重复代码，也能彻底规避异步状态更新带来的坑。

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