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

在rules-of-hooks中说：

请勿通过常规JavaScript函数调用Hook。相反，您可以：

✅从React函数组件中调用钩子。

✅从自定义挂钩中调用挂钩（我们将在下一页中了解它们）。

那是你做错了。

Answer 2

不应在回调内部使用反应性内置挂钩或自定义挂钩。这是上钩的规则之一。请详细了解here。

在事件处理函数中使用自定义钩子？

2 个答案: