React中的钩子调用无效

Question

我是一个很新的反应，并得到以下错误：

react-dom.development.js:14906 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

我想在提交表单时使用另一个组件。因此，在文件A中，当表单提交时，is使用一个函数，在调用其他组件之前首先检查某些内容，如：

ComponentName()

在组件上，我有一些usstate钩子：

function ComponentName() {
    const [state1, setState1] = useState('')
    const [state2, setState2] = useState('')
    const [state3, setState3] = useState('')

当页面正在加载的时候，我得到了这个错误，有没有人知道什么是错误的？

Answer 1

您不调用组件函数，而是将它们交给React，并让React根据需要调用它们。因此您永远不会在代码中编写componentname()。相反，您可以使用 作为呈现另一个组件的一部分，或者，对于React树的最顶层，作为您传递reactdom.render的JSX的一部分。（当然，也可以使用react.createElement而不是JSX。）

之所以会出现错误，是因为如果您调用了如图所示的组件函数，那么它并没有被用作组件，因此对钩子的调用在场景后面没有组件实例可使用 ；--因此会出现错误消息。