reactjs 我在搜索函数中收到无效的钩子调用错误

vi4fp9gy  于 2023-01-04  发布在  React
关注(0)|答案(2)|浏览(157)

我正在为我的搜索栏创建一个函数,但我收到这个错误:

功能如下:

const HandleSearch = async (val) => {
    useEffect(() => {
      const fetchData = async () => {
        const data = await db.collection('accounts').orderBy('date').get();
        setAccounts(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
      };
  
      fetchData();
    }, []);
  
    useEffect(() => {
      setAccounts(
        accounts.filter(
          (account) =>
            account.name.toLowerCase().includes(search.toLowerCase())
        )
      );
    }, [search, accounts]);
  }
pes8fvy9

pes8fvy91#

您可能以错误的方式使用钩子。根据rules of hooks,钩子只能从React函数组件和自定义钩子调用。不要从常规JavaScript函数、内部循环、条件或嵌套函数调用钩子。

t30tvxxf

t30tvxxf2#

正如错误消息所示,只能在函数组件内部调用钩子。
试着删除组件前面的async关键字,这样React就能理解它是一个功能组件,一切都能正常工作:)
目前它实际上不是一个组件,因为组件应该返回JSX。通过在它前面加上async关键字,它将隐式返回一个Promise
您可以阅读更多关于async函数here的内容。承诺是一个相当棘手的概念,需要时间来完全理解。

相关问题