React文本+流派双筛选仅在流派激活时生效问题排查

bug出在query筛选函数的提前返回逻辑：你写死了filterBy.genre === 'none'时直接返回全量本地存储的旋律数据，后续的文本关键词筛选逻辑完全被跳过，所以默认流派状态下输入搜索内容不会触发任何过滤。
除此之外现有代码还有三个隐藏问题：

• 初始筛选状态里text值为null，绑定到输入框时会触发React受控/非受控组件切换的警告
• 没有对文本关键词做空值判断，关键词为空时生成正则、执行匹配会产生非预期结果
• 流派过滤是硬编码的必经步骤，没有做「选了非默认流派才生效」的判断

修正筛选函数逻辑 #

去掉错误的提前返回分支，两个筛选维度都做「满足启用条件才执行过滤」的判断，修复后代码如下：

async function query(filterBy) {
  let melodies = _loadMelodiesFromStorage();
  try {
    if (!filterBy) return melodies;
    let filteredMelodies = [...melodies];

    // 文本筛选：输入内容非空时才执行匹配
    if (filterBy.text?.trim()) {
      const filterRegex = new RegExp(filterBy.text.trim(), 'i');
      filteredMelodies = filteredMelodies.filter((melody) => {
        return filterRegex.test(melody.name);
      });
    }

    // 流派筛选：选中值不是默认none时才执行匹配
    if (filterBy.genre && filterBy.genre !== 'none') {
      filteredMelodies = filteredMelodies.filter((melody) => {
        return melody.genre === filterBy.genre;
      });
    }

    return filteredMelodies;
  } catch (err) {
    console.log('cant get melodies from local storage', err);
    throw err;
  }
}

修正组件初始状态 #

把筛选state里的text初始值从null改为空字符串，避免React组件警告：

const [filter, setFilter] = useState({
  text: '',
  genre: 'none',
});

修复后完全符合预期的筛选逻辑：

• 未传入任何筛选条件时，返回全量旋律数据
• 默认流派（none）状态下输入搜索关键词，返回全流派下名称匹配关键词的结果
• 选中特定流派时，自动在对应流派的结果范围内匹配输入的关键词

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