如何筛选出foodSelectedKey值与foodFilter数组匹配的foodLog对象条目

安全阿岳

2026-10-6

问题原因

filter是数组专属原型方法，你当前state.foodLog被初始化为对象类型{}，调用该方法自然会报错。同时原代码还存在两处逻辑问题：一是错误直接访问foodLog.foodsSelectedKey而非遍历到的单条条目的对应字段，二是用map返回布尔数组不符合filter要求的单个布尔值判断规则。

解决方案

场景1：foodLog本身设计为存储所有录入条目的数组（最常见场景）

如果你本来就是要把多条用户录入的条目存在foodLog中，先调整state初始值为数组类型：

state = {
    // 调整为数组类型存储多条录入条目
    foodLog: [],
    // 用于过滤条目的关键词数组
    foodFilter: [],
};

之后修正过滤逻辑即可，按需选择匹配规则：

findMatches = () => {
    const { foodLog, foodFilter } = this.state;
    // 匹配规则1：条目的foodSelectedKey只要有一个值在过滤器中就算命中，用some
    const matched = foodLog.filter(item => {
        return item.foodSelectedKey.some(food => foodFilter.includes(food));
    });
    // 匹配规则2：条目的foodSelectedKey所有值都在过滤器中才算命中，替换为every即可
    // const matched = foodLog.filter(item => {
    //     return item.foodSelectedKey.every(food => foodFilter.includes(food));
    // });
    return matched;
};

场景2：foodLog确实设计为对象结构

如果你的foodLog设计为键是条目唯一标识、值是单条录入对象的结构（比如{ 'entry1': { foodSelectedKey: ['苹果'] }, 'entry2': { foodSelectedKey: ['香蕉'] } }），先把对象的值转为数组再过滤即可：

findMatches = () => {
    const { foodLog, foodFilter } = this.state;
    // 取出对象所有值转为数组
    const foodLogList = Object.values(foodLog);
    const matched = foodLogList.filter(item => {
        return item.foodSelectedKey.some(food => foodFilter.includes(food));
    });
    return matched;
};