ReactJS对键值对象筛选时出现filter is not a function错误如何解决

• 你调用filter方法的主体filterData[key]是包含label和values字段的对象，只有数组才有filter方法，对象调用该方法自然会抛出filter is not a function报错
• 你当前用Object.keys().map()的返回结果是数组，会把原本的键值对象结构完全修改为数组，不符合你原始的数据结构要求

针对键值对对象的筛选，核心是借助Object.entries()把对象转成可遍历的键值对数组，处理完成后再用Object.fromEntries()转回对象即可，下面提供两种常用场景的实现：

注意：你需要提前把全量的原始数据存到独立变量比如originalFilterData中，不要直接修改筛选用的state，否则清空搜索词时无法恢复全量数据

场景1：只保留values存在匹配项的顶级键，维持原对象结构 #

const handleSearchFilter = (event) => {
    const searchWord = event.target.value.trim().toLowerCase(); // 统一大小写避免匹配遗漏
    if (!searchWord) {
        setFilterData(originalFilterData);
        return;
    }
    const newFilter = Object.fromEntries(
        Object.entries(filterData).filter(([key, item]) => {
            // 判断当前条目的values数组中是否存在匹配搜索词的项
            return item.values.some(value => value.toLowerCase().includes(searchWord));
        })
    );
    setFilterData(newFilter);
};

场景2：保留所有顶级键，只过滤每个键对应values中不匹配的项 #

const handleSearchFilter = (event) => {
    const searchWord = event.target.value.trim().toLowerCase();
    if (!searchWord) {
        setFilterData(originalFilterData);
        return;
    }
    const newFilter = Object.fromEntries(
        Object.entries(filterData).map(([key, item]) => {
            // 只过滤当前条目的values数组
            const filteredValues = item.values.filter(value => value.toLowerCase().includes(searchWord));
            return [key, {...item, values: filteredValues}];
        })
    );
    setFilterData(newFilter);
};

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