React.js如何通过多选框选中状态过滤对象数组类型的电影数据

核心映射逻辑梳理 #

明确现有数据的对应关系：

• 评分多选框：除id=0（代表任意评分）外，多选框id与电影rating字段值完全相等，可以直接匹配
• 流派多选框：除id=0（代表任意流派）外，id与流派名称的对应关系如下：
  • 1 → Action
  • 2 → Comedy
  • 3 → Drama
  • 4 → Thriller

具体代码修改 #

只需修改App.js中的handleFilters方法即可，完整代码如下：

const handleFilters = (checkboxState, key) => {
    const newFilters = {...selected};
    newFilters[key] = checkboxState;
    
    // 流派id到名称的映射表
    const genreIdMap = {
        1: 'Action',
        2: 'Comedy',
        3: 'Drama',
        4: 'Thriller'
    };

    // 执行筛选逻辑
    const filteredMovies = data.filter(movie => {
        // 匹配评分规则
        let isRatingMatch = true;
        const selectedRatings = newFilters.rating;
        // 选了任意评分或者没有选中任何评分则不限制
        if (selectedRatings.length && !selectedRatings.includes(0)) {
            isRatingMatch = selectedRatings.includes(movie.rating);
        }

        // 匹配流派规则
        let isGenreMatch = true;
        const selectedGenres = newFilters.genre;
        // 选了任意流派或者没有选中任何流派则不限制
        if (selectedGenres.length && !selectedGenres.includes(0)) {
            const allowedGenres = selectedGenres.map(id => genreIdMap[id]);
            isGenreMatch = allowedGenres.includes(movie.genre);
        }

        // 两个条件同时满足才会保留
        return isRatingMatch && isGenreMatch;
    });

    setMovies(filteredMovies);
    setSelected(newFilters);
};

可选交互优化建议 #

如果需要实现「选中任意选项时自动取消同组其他选中项」的效果，可以修改Checkboxes组件的onChangeHandler方法：

const onChangeHandler = (checkboxId) => {
    let newState = [];
    if (checkboxId === 0) {
        // 选中任意时，只保留0
        newState = [0];
    } else {
        // 选中其他选项时，移除已经选中的0，再处理当前选项的选中状态
        const withoutAny = checkedArray.filter(id => id !== 0);
        newState = handleToggle(checkboxId, withoutAny);
    }
    setCheckedArray(newState);
    handleFilters(newState);
};

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