我正在为我的搜索栏创建一个函数,但我收到这个错误:
功能如下:
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]);
}
2条答案
按热度按时间pes8fvy91#
您可能以错误的方式使用钩子。根据rules of hooks,钩子只能从React函数组件和自定义钩子调用。不要从常规JavaScript函数、内部循环、条件或嵌套函数调用钩子。
t30tvxxf2#
正如错误消息所示,只能在函数组件内部调用钩子。
试着删除组件前面的
async
关键字,这样React就能理解它是一个功能组件,一切都能正常工作:)目前它实际上不是一个组件,因为组件应该返回
JSX
。通过在它前面加上async
关键字,它将隐式返回一个Promise
。您可以阅读更多关于
async
函数here的内容。承诺是一个相当棘手的概念,需要时间来完全理解。