在事件处理程序函数中使用自定义挂钩

Question

我是使用React Hooks的初学者(不过我已经使用React一段时间了(，我正试图在我的事件处理程序中使用一个自定义钩子。

然而，我得到这个错误说

React Hook "useMyCustomHook" is called in function "onSubmit" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

这是我的代码：

import MyCustomHook from './myCustomHook';

const MyComponent= () => {
const onSubmit = (e) => {
e.preventDefault();
const someData = {
// data
};
useMyCustomHook(someData);
};
return (
<form onSubmit={onSubmit}>
<div className="form-control">
// some form content
</div>
</form>
)
}

我在这里做错了什么？

Answer 1

从钩子的规则来看：

不要从常规JavaScript函数中调用Hooks。相反，您可以：

• ✅从React函数组件调用Hooks
• ✅从自定义挂钩调用挂钩(我们将在下一页了解它们(

这就是你做错的地方。