搜索函数出现Invalid Hook Call Error问题求助

错误原因 #

你在HandleSearch这个普通函数里直接调用了useEffect，这违反了React Hook的核心规则：Hook只能在React函数组件的顶层或自定义Hook的顶层调用，不能嵌套在普通函数、条件判断、循环这类代码块里。

修正方案 #

把useEffect移到组件顶层，同时重新设计搜索逻辑（注意保留原始数据，避免多次过滤导致数据丢失）：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [accounts, setAccounts] = useState([]);
  // 保存原始数据，避免搜索后覆盖掉源数据
  const [originalAccounts, setOriginalAccounts] = useState([]);
  const [search, setSearch] = useState('');

  // 初始化加载数据，放在组件顶层
  useEffect(() => {
    const fetchData = async () => {
      const data = await db.collection('accounts').orderBy('date').get();
      const fetchedAccounts = data.docs.map(doc => ({ ...doc.data(), id: doc.id }));
      setAccounts(fetchedAccounts);
      setOriginalAccounts(fetchedAccounts);
    };
    fetchData();
  }, []);

  // 搜索处理函数，直接执行过滤逻辑
  const HandleSearch = (val) => {
    setSearch(val);
    // 基于原始数据过滤，保证每次搜索都是完整数据范围
    const filteredAccounts = originalAccounts.filter(account => 
      account.name.toLowerCase().includes(val.toLowerCase())
    );
    setAccounts(filteredAccounts);
  };

  // 也可以选择用useEffect监听search变化来过滤，此时HandleSearch只负责更新关键词
  // useEffect(() => {
  //   const filteredAccounts = originalAccounts.filter(account => 
  //     account.name.toLowerCase().includes(search.toLowerCase())
  //   );
  //   setAccounts(filteredAccounts);
  // }, [search, originalAccounts]);

  // const HandleSearch = (val) => {
  //   setSearch(val);
  // };

  return (
    <>
      <input 
        type="text" 
        onChange={(e) => HandleSearch(e.target.value)} 
        placeholder="输入名称搜索" 
      />
      {/* 这里渲染你的accounts列表 */}
    </>
  );
};

关键说明 #

1. 把数据加载的useEffect移到组件顶层，完全符合Hook调用规则，直接解决报错。
2. 新增originalAccounts保存原始数据，确保每次搜索都从完整数据集中过滤，避免反复过滤导致数据越来越少的问题。
3. HandleSearch作为普通事件处理函数，不再嵌套任何Hook，只负责处理搜索逻辑。

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