如何在react-native中对嵌套对象数组的数组数据进行筛选

问题原因 #

• filter 回调函数使用大括号包裹逻辑时没有显式返回判断结果，所有判断逻辑默认返回undefined，会被filter判定为不满足条件，最终得到空筛选结果。
• 原代码使用map遍历menus数组，最终返回的是每个menu对应的筛选后配料数组组成的二维数组，如果你的预期是拿到所有符合条件的配料组成的一维数组，还需要做扁平化处理。

修复方案 #

根据你的实际需求可以选择对应实现方式：

保留menu层级，仅筛选每个menu下符合条件的配料 #

仅给filter回调添加return语句即可，也可以简化箭头函数写法用隐式return：

// 写法1：显式return
let ing = this.state.getData.menus.map((item) => {
    return item.ingredients.filter((i) => {
        return i.ingredient_name.includes(text);
    });
});
console.log(ing);

// 写法2：箭头函数隐式return，更简洁
let ing = this.state.getData.menus.map((item) => 
    item.ingredients.filter((i) => i.ingredient_name.includes(text))
);

直接获取所有符合条件的配料组成的一维数组 #

使用flatMap替代map，会自动把每个menu返回的筛选后数组合并为一维数组：

let ing = this.state.getData.menus.flatMap((item) => 
    item.ingredients.filter((i) => i.ingredient_name.includes(text))
);
console.log(ing);

额外提示：如果需要实现大小写不敏感的模糊搜索，可以把比对的两个值都转成统一大小写再判断：i.ingredient_name.toLowerCase().includes(text.toLowerCase())

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