React多条件filter筛选出现单筛选值为undefined时无数据问题

你的筛选条件逻辑写反了判断主体：你当前判断的是数据条目自身的country/age是否为undefined，而不是判断筛选值aaa/bbb是否为undefined。
当筛选值aaa为undefined时，原判断e.country === aaa || e.country === undefined等价于e.country === undefined || e.country === undefined，也就是只有country为空的条目才会通过筛选，自然大部分情况下没有符合条件的数据。

useEffect(()=>{
  let updated = data.filter(function(e){
    // 筛选值aaa为空就跳过country校验，否则校验值匹配
    const matchCountry = aaa === undefined || e.country === aaa;
    // 筛选值bbb为空就跳过age校验，否则校验值匹配
    const matchAge = bbb === undefined || e.age === bbb;
    return matchCountry && matchAge;
  })
  setRows(updated)
},[aaa, bbb, data])

注意：这里补充了data到依赖数组里，避免数据源更新时筛选结果不同步的问题。

如果修改后仍有问题，可以按以下步骤排查：

• 打印aaa、bbb的实时值，确认筛选器清空时返回的确实是undefined，部分组件库清空筛选时默认返回的是空字符串''或者null，需要对应调整判断条件
• 打印data的原始值，确认数据字段名和判断的字段名完全匹配，不存在大小写、拼写错误

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