React.js Formik宠物搜索页年龄区间筛选功能实现问题求助

问题原因 #

你的代码存在两个问题导致年龄筛选失效：

1. 变量名拼写错误：Search.js中渲染年龄下拉选项时，调用了searchGuests.SearchAge，但Data.js中导出的字段是小写开头的searchAge，大小写不匹配导致下拉选项渲染异常，表单无法拿到正确的年龄筛选值。
2. 筛选逻辑错误：年龄是区间匹配场景，不能直接用字符串includes匹配，你选的"<3"、">3"是区间标识，和宠物数据里的"1"、"2"这种年龄值不可能直接匹配上，需要单独写区间判断逻辑。

修复方案 #

1. 修正年龄下拉框代码

修改Search.js中年龄select的渲染逻辑，补全value、key属性，修正变量名：

<select id="age" name="age" value={formik.values.age} {...formik.getFieldProps('age')}>
  <option value="Select Age">Select Age</option>
  {searchGuests.searchAge.map(age => <option value={age} key={age}>{age}</option>)}
</select>

2. 重写筛选逻辑

替换Search.js中formik的onSubmit代码，单独处理年龄的区间判断：

onSubmit: values => {
  const searchItem = searchGuests.guestsResults.filter(item => {
    // 位置、品种、性别筛选逻辑保持不变
    const locationMatch = item.location.toLowerCase().includes(values.location.toLowerCase())
    const breedMatch = item.breed.toLowerCase().includes(values.breed.toLowerCase())
    const genderMatch = item.gender.toLowerCase().includes(values.gender.toLowerCase())
    // 单独处理年龄区间判断
    let ageMatch = true
    // 仅选择了非默认/非全部的年龄选项时才执行筛选
    if (values.age && values.age !== 'Select Age' && values.age !== 'All') {
      // 把宠物年龄从字符串转为数字做比较
      const petAge = Number(item.age)
      if (values.age === '<3') {
        ageMatch = petAge < 3
      } else if (values.age === '>3') {
        ageMatch = petAge > 3
      }
    }
    return locationMatch && ageMatch && breedMatch && genderMatch
  })
  setSearchresults(searchItem)
},

修改后即可正常按年龄区间筛选，你现有测试数据中的宠物年龄都小于3，选"<3"会返回全部结果，选">3"返回空列表，选"All"返回全部结果，符合预期。

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