React Select选省份筛诊所出现TypeError错误求助

错误TypeError: termSearch.toLowerCase is not a function的原因是：你在filterSelect函数中直接对传入的termSearch调用toLowerCase()，但termSearch其实是react-select返回的选项对象（类型为SingleValue<OptionType>，结构是{value: string, label: string}），并非字符串，对象没有toLowerCase()方法，导致报错。

修复步骤 #

1. 修正筛选逻辑，使用选项对象的value属性 #

修改filterSelect函数，提取选项的value值作为筛选关键词，同时处理“Todos”选项展示所有诊所的需求：

const filterSelect = (termSearch: SingleValue<OptionType>) => {
  // 处理未选择或选择"Todos"的情况，返回所有诊所
  if (!termSearch || termSearch.value === "Todos") {
    setClinicListFilteredSelect(clinicList);
    return;
  }

  const searchTerm = termSearch.value.toLowerCase();
  const resultFilterSelect = clinicList.filter((element) => {
    // 确保province存在后再转小写匹配
    return element.province?.toString().toLowerCase().includes(searchTerm);
  });
  setClinicListFilteredSelect(resultFilterSelect);
};

2. 完善类型定义 #

给filterSelect的参数加上明确的类型标注，避免类型模糊：

const filterSelect = (termSearch: SingleValue<OptionType>) => { ... }

3. 可选：处理空选择的边界情况 #

如果允许用户清空选择，当前的handleChangeSelect已经可以兼容null值，无需额外修改：

const handleChangeSelect = (provinceList: SingleValue<OptionType>) =>{
  console.log(provinceList)
  setFilterSelectClinic(provinceList);
  filterSelect(provinceList);
}

完整修正后的核心代码片段 #

const handleChangeSelect = (provinceList: SingleValue<OptionType>) =>{
  console.log(provinceList)
  setFilterSelectClinic(provinceList);
  filterSelect(provinceList);
}

const filterSelect = (termSearch: SingleValue<OptionType>) => {
  if (!termSearch || termSearch.value === "Todos") {
    setClinicListFilteredSelect(clinicList);
    return;
  }

  const searchTerm = termSearch.value.toLowerCase();
  const resultFilterSelect = clinicList.filter((element) => {
    return element.province?.toString().toLowerCase().includes(searchTerm);
  });
  setClinicListFilteredSelect(resultFilterSelect);
}

这样修改后，就能正确获取选中省份的字符串值进行筛选，同时处理了显示所有诊所的逻辑，避免了类型错误。

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