React搜索过滤功能报TypeError: setFilterFn is not a function如何修复

• useState返回值的解构顺序错误：React的useState钩子返回数组的第一个元素是状态值本身，第二个才是状态更新函数。你当前把第一个返回值命名为setFilterFn，它本质是初始传入的对象，不是可调用的函数，触发handleSearch时调用它就会抛出TypeError: setFilterFn is not a function错误。
• 过滤逻辑写反：现有代码判断输入框非空时返回全部数据，输入为空时才执行过滤，和你想要的「输入后筛选匹配内容」的需求完全相反。
• 存在合成事件复用隐患：React的合成事件会被回收，直接在setFilterFn的回调里访问e.target可能出现取值异常。

// 修正useState解构顺序：第一个是状态值，第二个是更新函数
const [filterFn, setFilterFn] = useState({ fn: items => { return items; } })

const handleSearch = e => {
  // 提前提取搜索值，避免合成事件回收问题
  const searchVal = e.target.value.trim().toLowerCase()
  setFilterFn({
    fn: items => {
      // 修正过滤逻辑：空输入返回全部，非空则过滤
      if (searchVal === "") {
        return items
      } else {
        return items.filter(item => item.fullName.toLowerCase().includes(searchVal))
      }
    }
  })
}

后续渲染列表时，直接调用filterFn.fn(你的原始列表数据)就能拿到过滤后的结果，不会再出现类型报错。

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